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内 容 提 要 


JavaScript 入 门 书 ， 以 易学 便 查 、 图 文 并 成 、 循 序 渐进 条 





著称 。 书 中 从 JavaScript 语言 基础 开始 ， 分 别 讨 论 了 图 像 、 框 架 、 


编写 脚本 。 























[善于 用 常见 任务 讲解 语言 知识 而 





浏览 器 窗口 、 表 单 、 正 则 表达 式 等 内 容 ， 
循序 渐进 地 给 出 了 JavaScript 及 相关 的 CSS、DOM、Ajax 和 jQuery 等 技术 。 第 9 版 全 新 改写 ， 新 增 更 多 示 
例 和 技术 介绍 ， 使 用 流行 的 jQuery 框架 向 网 站 轻松 添加 有 用 的 功能 ; 





更 增添 一 章 专门 介绍 如 何 为 移动 设备 


本 书 适合 有 志 于 从 事 Web 开发 和 设计 的 初学 者 ， 也 是 高 等 院 校 相关 课程 的 理想 入 门 教材 。 
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说 以 本 书 纪念 Bill Horwitz 和 Dorothy Negrino， 他 们 饱含 着 求知 的 热情 。 


特别 纪念 





1997 年 ， 在 写 《JavaScript 基 础 教程 (第 1 版 )》 第 1 章 的 时 候 ， 我 们 费 尽心 思想 找到 革 种 方式 说 清 
楚 JavaScript 对 象 的 概念 , 家 里 刚 添 的 新 成 员 Pixel 猫 给 了 我 们 灵感 。 这 么 多 年 来 , 无 数 读者 告诉 我 们 “ 猫 
对 象 ”帮助 他 们 更 好 地 理解 了 JavaSeript。Pixel 成 了 我 们 许多 书 的 吉祥 物 。2013 年 秋天 , 在 跟 我 们 愉快 
相伴 多 年 后 ，Pixel 因 衰老 去 世 了 。 如 今 这 本 书 出 版 第 9 版 ， 我 们 想 告诉 Pixel: 大 家 都 很 想念 你 。 

















Pixel 最 后 一 次 跟 我 们 在 一 起 














Dll} 


Hl] 





X 迎 使 用 JavaScript! 使 用 这 种 容易 上 手 的 程序 设计 语言 ， 可 以 给 网 页 增色 ， 使 网 页 更 好 用 。 
人 木 书 是 一 本 轻松 的 JavaScript 入 门 教程 ， 所 以 即使 不 是 计算 机 高 手 ， 你 也 可 以 由 此 很 快 学 会 











脚本 编写 。 任 何 时 候 你 都 不 需要 借助 
你 没有 必要 这 样 做 啦 !1” 


读者 对 象 



































工具 包 。 就 像 我 们 的 一 位 朋友 说 的 :“ 我 们 已 经 够 疯狂 了 ， 所 以 





我 们 猜想 既然 你 有 兴趣 学 习 JavaScript， 那 么 肯定 有 创建 HTML 页 面 和 Web 站 点 的 经 验 ， 而 且 和 希望 














更 进一步 ,使 站 点 更 具 交 互 性 。 学 习 本 书 并 不 要 求 你 了 解 任 何 编程 或 脚本 编程 的 知识 ， 也 不 要 求 你 是 






























































HTML 专家 ( 当然 , 如 果 你 是 HTML 专 家 也 无 妨 ) 我 们 只 假设 你 具备 构建 网 页 的 基本 知识 , 而 且 熟 悉 常 








的 基础 知识 。 





























用 的 HTML 标 签 , 比如 链接 、 图 像 和 表单 ,同样 , 我们 也 希望 你 了 解 现代 网 页 男 一 个 主要 构件 块 一 一 CSS 


在 某 些 前 题 为 “目前 需要 了 解 的 HTML 知 识 ” 的 表 中 ， 我们 对 HTML 做 了 一 些 解 释 。 并 非 每 章 都 
有 这 部 分 内 容 ， 只 有 在 我 们 认为 你 需要 速 查 的 地 方才 会 提供 。 有 了 这 些 HTML 信 息 ， 你 就 不 需要 在 阅 
读本 书 的 同时 ， 再 去 翻 男 一 本 书 或 者 打开 相关 网 页 查找 HTML 属 性 的 语法 了 "。 

如 果 你 对 编程 有 所 了 解 , 应 该 会 注意 到 本 书 介绍 JavaScript 的 方式 与 其 他 图 书 的 风格 很 不 一 样 。 本 




















书 并 不 深入 介绍 JavaScript 的 语法 和 结 





























构 ， 而 且 本 书 也 不 是 一 本 深入 而 全 面 的 语言 参考 书 ( 当然 附录 A 












































述 大 量 的 额外 信息 。 


中 提供 了 一 些 很 有 价值 的 内 容 )。 这 方面 市 面 上 已 经 有 不 少 很 好 的 书 , 附录 DD 中 列 了 出 来 。 本 书 和 这 些 
书 之 间 的 差异 是 ,本 书 并 不 拘泥 于 形式 ,而 是 集中 地 演示 如 何 用 JavaScript 完 成 一 些 有 用 的 任务 ,不 效 











在 本 书 的 前 几 版 中 ， 我 们 增加 了 对 Ajax 和 jQuery 的 介绍 。 这 种 技术 结合 使 用 了 JavaScript 和 其 他 常 








用 的 Web 技 术 为 网 页 增加 交互 性 ， 并 











是 改 善 了 Web 站 点 的 用 户 体验 。 在 这 个 版 本 中 ,我 们 添加 了 更 多 























示例 和 技术 介绍 ， 使 用 流行 的 jQuery 框架 向 网 站 轻松 添加 有 用 的 功能 。 





如 何 使 用 本 书 




















本 书 采 用 一 些 特殊 的 版 式 ， 帮 助 你 更 轻松 地 学 习 和 理解 JavaScript。 
组 成 本 书 的 大 部 分 内 容 由 分 步 说 明 构 成 。 我 们 在 书 中 以 特殊 的 字体 样式 表示 HTML 或 JavaScript 代 




















码 ， 比 如 : 

















(D 要 学 习 HTML， 推 荐 阅读 《HTML5 与 CSS3 基 础 教程 (第 8 版 )》( http://www.ituring.com.cn/book/1199 )。 一 一 编者 注 





<div id = "thisDiv"> window.onload = initLinks; 
你 还 会 注意 到 ，HTML 和 JavaScript 代 码 都 显示 为 小 写 。 这 人 么 做 是 因为 ， 这 个 版 本 中 的 所 有 脚本 都 
TG W3C ( World Wide Web Consortium ， 万 维 网 联盟 ) 的 HTML5 标 准 。 当 在 JavaScript 中 看 到 引号 时 ， 
总 是 直 引 号 CR"), MNES SS ( 或“)。 弯 引 号 会 使 JavaScript 失 效 , 在 编写 脚本 时 应 该 避免 使 用 。 
在 与 分 步 说 明 对 应 的 脚本 中 , 我 们 以 粗 体 突出 显示 脚本 中 正在 讨论 的 部 分 , 这 样 你 就 能 够 马上 找 
到 我 们 正在 讨论 的 代码 。 我 们 还 常常 在 Web 浏 览 器 窗口 的 屏幕 图 中 以 灰色 底 纹 突出 显示 其 中 某 些 重要 
的 部 分 。 
因为 图 书 的 页 面 比 计算 机 屏幕 窗 , 所 以 一 些 JavaScript 代 人 码 行 在 页 面 上 排 不 开 。 出现 这 种 情况 时 ， 
我 们 将 代码 行 分 为 多 行 ， 在 接续 行 前 面 使 用 箭头 一 表示 这 是 续 行 ， 并 且 将 续 行 缩 进 ， 如 下 所 示 : 

dtString = "Hey, just what are you 

‘doing up so late?"; 


关于 浏览 器 


从 第 6 版 起 有 一 个 大 的 变化 :我 们 不 再 支持 那些 版 本 非常 老 的 浏览 器 或 者 那些 在 支持 Web 标 准 方 玫 
做 得 很 差 的 浏览 器 ,我们 发 现 , 几乎 所 有 Web 用 户 都 升级 到 了 现代 浏览 器 , 它们 充分 地 支持 公认 的 Web 
标准 ( 比如 HTML、CSS2 和 DOM )。 这 包括 IE 9 或 更 高 版 本 ，Firefox 、Safari 和 Chrome 的 所 有 版 本 ， 以 
及 Opera 7 或 更 高 版 本 。 

我 们 在 几 种 操作 系统 上 的 多 个 浏览 器 中 测试 了 脚本 , 这 些 操作 系统 包括 Windows( 主要 是 Windows 
7, 有 少数 情况 是 Windows 8, 不 再 支持 Windows XP 和 Vista ), OS X ( 10.8.5 或 更 高 版 本 ) 和 Ubuntu Linux 
(只 在 Ubuntu 的 默认 浏览 器 Firefox 中 测试 了 脚本 )。 

我 们 使 用 最 主流 的 浏览 器 一 一 微软 Windows 版 本 的 正 一 一 虚拟 测试 了 本 书 中 的 所 有 内 容 (使 用 了 
IE 9, IE 10 和 IE 11 ) 这 一 版 , 我 们 还 增加 了 针对 Mac 和 Windows 平 台 上 持续 更 新 的 谷歌 Chrome 的 测试 。 
我 们 还 用 Mac 和 Windows 平 台 上 最 新 版 本 的 Firefox C 每 几 周 就 更 新 一 次 ， 本 书 使 用 的 最 新 版 本 为 29 ) 
对 脚本 进行 了 测试 。 此 外 ， 还 使 用 Mac 平 台 上 的 Safari 6 和 7 进行 了 测试 。 这 意味 着 这 些 脚本 对 于 从 
WebKit5| 擎 衍生 出 来 的 任何 浏览 器 都 可 以 正常 使 用 ,对 基于 KHTML ( Safari 最 开始 使 用 的 开源 呈现 引 
擎 ) 的 浏览 器 (比如 Linux 浏 览 器 Konqueror ) 也 可 以 正常 使 用 。WebKit 也 是 移动 操作 系统 浏览 器 核心 
之 一 ， 比 如 苹果 的 iOS 、 谷 歌 的 Android 、 亚 马 逊 的 Kindle Fire 平 板 电脑 ， 以 及 黑莓 的 Blackberry 10。 对 
于 移动 设备 ， 我 们 主要 将 脚本 在 iPhone 和 iPad 上 面 进行 了 测试 。 


不 必 输 入 代码 


一 些 JavaScript 图 书 只 在 书 中 印刷 出 脚本 代码 , 你 在 实践 时 必须 自己 输入 代码 。 我们 认为 这 种 方式 
已 经 过 时 了 。 作 者 们 不 得 不 完成 这 些 艰 苦 的 输入 工作 , 但 是 你 不 必 重 复 这 些 劳 动 。 我 们 为 本 书 提供 了 
一 个 配套 Web 站 点 ， 其 中 包含 本 书 中 的 所 有 脚本 ， 你 可 以 将 这 些 脚 本 复制 并 粘贴 到 自己 的 网 页 中 。 如 
果 我 们 在 书 中 发 现 了 任何 错误 ， 也 会 在 这 里 更 正 。 这 个 配套 站 点 的 网 址 是 www.javascriptworld.com。 

如 果 由 于 某 种 原因 你 打算 输入 某 些 脚本 示例 ,那么 可 能 会 发 现 这 些 示 例 似乎 不 起 作用 ,这 是 因为 
你 没有 这 些 示例 所 用 的 支持 文件 。 例 如 , 在 图 像 上 实现 屏幕 效果 的 示例 中 , 需要 图 像 文 件 。 但 请 放心 ， 
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这 些 文件 都 放 在 本 书 的 Web 站 点 上 了 ， 而 且 打 包 好 了 供 你 下 载 。 你 找到 的 可 下 载 文件 包含 所 有 脚本 、 
HTML 文件 、CSS 文 件 以 及 用 到 的 所 有 媒体 文件 。 如 果 你 遇 到 任何 问题 ， 可 以 查看 配套 Web 站 点 上 的 
FAQ (ILE )。 
如 果 阅 读 了 FAQ, 而 你 的 问题 还 没有 解决 ， 可 以 通过 js9@javascriptworld.com 给 我 们 发 邮件 。 很 抱 
歉 地 说 一 声 ， 因 为 收 到 的 邮件 太 多 ， 所 以 我 们 不 可 能 也 不 会 回复 那些 把 本 书 问题 发 送 到 我 们 个 人 邮箱 
的 邮件 。 但 是 ， 我 们 可 以 保证 发 送 到 js9@javascriptworld.com 的 邮件 会 得 到 答复 。 
当然 ， 自 己 输入 代码 可 能 会 帮 你 更 彻底 地 理解 JavaScript， 那 么 但 做 无 妨 ! 


开始 吧 


JavaScript 最 好 的 一 点 是 它 很 容易 用 一 个 简单 的 脚本 在 网 页 上 实现 很 酷 的 效果 , 然后 根据 需要 逐渐 
添加 更 复杂 的 素材 。 你 不 必 等 到 学 完整 本 书 ， 就 可 以 开始 改进 自己 的 网 页 。 等 到 你 看 完 本 书 的 时 候 ， 
将 能 用 Ajax 和 jQuery 给 站 点 添加 高 级 的 交互 效果 了 。 

当然 ,千里 之 行 , 始 于 足下 。 欢 迎 光 临 ,请 勿 将 手 伸 出 窗外 ,照相 时 请 不 要 用 闪光 灯 。 探 索 JavaScript 
的 旅程 已 经 开始 。 


致谢 


感谢 我 们 的 编辑 Nancy Peterson, 她 的 专业 精神 、 冷 静 沉 着 和 温 暧 的 关怀 使 本 书 的 写作 过 程 非常 愉 
悦 。 特 别 感谢 因 我 们 的 私事 耽误 出 版 流程 时 她 的 额外 付出 。 

同样 感谢 本 书 另 一 名 编辑 Scholle McFarland, 在 Nancy 工 作 安排 超 负 的 情况 下 , 他 的 加 入 确保 了 本 
书 的 顺利 出 版 。 
感谢 Scout Festa 熟 练 的 文字 加 工 工 作 。 衷 心 感谢 本 书 的 排版 人 员 Danielle Foster， 她 优雅 镇 定 地 完 
成 了 排版 工作 。 感 谢 给 本 书 编 索 引 的 Emily Glossbrenner， 她 做 了 一 项 吃力 不 讨好 的 工作 。 
感谢 Peachpit 出 版 社 的 Nancy Ruenzel 和 Nancy Davis 给 予 支 持 。 
感谢 采用 本 书 以 前 的 版 本 作为 课程 教材 的 所 有 高 中 、 大 中 专 院 校 和 大 学 的 教师 。 



























































































































































第 1 章 了 解 JavaScript ee 
1.1 JavaScript 是 什 委 站 
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对 Web 站 点 的 开发 者 来 说 ,HTML 的 发 展 是 一 件 好 坏 参 半 的 事 , 在 万 维 网 发 展 的 早期 ,HTML 
相当 简单 ， 很 容易 就 能 够 掌握 设计 网 页 所 需 知 道 的 一 切 。 

随 着 Web 的 发 展 , 页 面 设 计 人 员 还 希望 他 们 的 页 面 能 够 与 用 户 进 行 交 互 , HTML 很 快 就 显得 不 
足以 满足 这 一 需求 了 。Netscape 发 明了 JavaScript, 作为 控制 浏览 器 和 给 网 页 添加 活力 和 交互 性 的 
方法 。 

自从 诞生 以 来 ，JavaScript 已 经 经 历 了 不 小 的 演化 ， 有 时 候 在 不 同 的 浏览 器 上 演化 的 方向 有 所 不 
同 。 在 本 书后 面 ， 我 们 将 详细 讨论 JavaScript 的 演化 。 

在 本 章 中 ， 你 将 了 解 JavaScript 是 什么 ( 以 及 不 是 什么 )， 它 可 以 做 什么 (以 及 不 能 做 什么 ) 和 
JavaScript 语言 的 一 些 基 础 知识 。 另 外 ， 还 会 向 你 介绍 Ajax， 这 是 JavaScript 和 其 他 技术 的 一 种 组 合 ， 
ETE Web 站 点 的 交互 性 和 创造 性 方面 掀起 了 新 的 浪潮 。 






































1.1 JavaScript 是 什么 


JavaScript 是 一 种 可 以 用 来 给 网 页 增加 交互 性 的 编程 语言 。 但 是 ， 如 果 你 不 是 程序 员 ， 那 么 也 不 
必 担 心 。Web FARE JavaScript 代码 , 复制 一 下 并 稍 作 修 改 , 就 可 以 供 自己 使 用 。 实际 上 , 这 种 “站 
在 其 他 程序 员 肩 膀 上 ”的 方式 正 是 熟悉 JavaScript 的 好 方法 。 

为 了 帮助 你 熟悉 JavaScript， 我 们 建立 了 一 个 与 本 书 配套 的 Web 站 点 。 在 这 个 站 点 上 提供 了 本 书 
中 的 所 有 脚本 〈 这 样 ， 你 就 不 用 自己 输入 了 )， 以 及 更 多 的 说 明 、 附 加 资料 和 更 新 内 容 。 站 点 的 网 址 
是 wwwjavascriptworld.com。 

常常 会 看 到 JavaScript 被 称 为 “脚本 语言 ”( scripting language )， 这 暗示 着 它 更 适合 编写 脚本 而 不 
是 程序 。 这 实际 上 并 没有 根本 性 的 差异 。JavaScript 脚本 也 是 一 种 程序 ， 它 们 包含 在 HTML 页 面 内 部 
(原先 编写 脚本 的 方式 )， 或 者 驻 留 在 外 部 文件 中 〈 现在 的 首选 方法 ) 在 HTML 页 面 上 ， 因 为 脚本 文 
本 包围 在 cscript> 标 签 中 ， 所 以 它 不 会 显示 在 用 户 的 屏幕 上 ， 而 Web 浏览 器 知道 应 该 运行 JavaScript 
TÉ. «scrip tR ar UE HTML 页 面 的 <head> 部 分 中 ， 如 脚本 1-1 所 示 。 但 是 如 果 愿 意 ， 也 可 以 
将 脚本 放 在 <body> 部 分 中 。 


脚本 1-1 这 个 非常 简单 的 脚本 在 浏览 器 窗口 中 输出 “Hello, Cleveland!” 


<!DOCTYPE html> 
<html> 
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<head> 
<title>Barely a script at all</title> 
<script type="text/javascript"> 
window.onload = function() { 
document.getElementById ("myMessage").innerHTML = "Hello, Cleveland!"; 


</script> 
</head> 
<body> 
«hi id-"myMessage"» 
«hi» 
«/body» 
«/html» 


如 果 你 还 不 熟悉 这 些 HTML 概念 ,需要 关于 HTML 的 更 多 信息 ,那么 我 们 建议 你 读 一 下 Elizabeth 
Castro 和 Bruce Hyslop 所 著 的 《HTML5 与 CSS3 基础 教程 (第 8 版 ) 六 如果 你 只 需要 简单 回顾 一 下 ， 
那么 本 书 的 许多 章节 都 提供 了 “目前 需要 了 解 的 HTML 知识 "， 其 中 列 出 了 相关 的 HTML 标签 。 



































1.2 JavaScript 不 是 Java 


尽管 名 字 中 有 Java, 但 是 JavaScript 和 Java 之 间 没 有 太 大 的 关系 。Java 是 一 种 功能 完备 的 编程 语 
A. FA Sun 公司 开发 ， 由 Oracle 公司 推广 (自从 Oracle 收购 Sun 公司 以 来 )。Java 是 C 和 C++ 编程 语 
言 之 后 的 又 一 种 主流 语言 ,程序 员 可 以 使 用 它 创 建 完整 的 应 用 程序 和 控制 消费 类 电子 设备 。 与 其 他 语 
AA, Java 宣称 具有 路 平 台 兼 容 性 。 也 就 是 说 ， 程 序 员 应 该 能 够 编写 出 可 以 在 所 有 种 类 的 机 器 上 运 
行 的 Java 程序 ， 无 论 机 器 运行 的 是 Windows, Mac OS X 还 是 任何 风格 的 Unix。 但 实际 上 ，Java 不 总 
是 能 够 实现 这 个 梦想 ， 因 为 Sun 公司 和 微软 公司 在 这 种 语言 的 发 展 方向 方面 有 很 大 的 分 疏 。 微 软 公司 
首先 试图 以 自己 的 方式 将 Java 集成 到 Windows 中 ( Sun 公司 认为 ， 这 种 方式 会 使 Java 在 Windows 上 
以 一 种 方式 工作 ， 而 在 其 他 机 器 上 以 另 一 种 方式 工作 ， 从 而 破坏 了 Java 的 跨 平台 兼容 性 )。 随 后 ， 微 
软 公 司 从 Windows 中 完全 去 除了 Sun 公司 的 Java， 而 创建 了 自己 的 类 Java 语言 : C#。 经 过 两 公司 之 
间 的 一 轮 诉讼 之 后 ，Sun 公司 占据 了 上 风 ， 微 软 从 Windows 中 移 除 了 自己 的 Javas ME, 不论 是 哪 种 
平台 ， 都 可 以 安装 最 新 的 Java 版 本 ( www.java.com/getjava/ )。 

除了 单独 的 应 用 程序 之 外 ，Java 主要 用 于 在 客户 端 (client side， 即 用 户 的 浏览 器 中 ) 创建 applet。 
applet 是 一 种 通过 因特网 下 载 并 在 Web 浏览 器 中 运行 的 小 程序 。 因 为 Java 具有 路 平台 性 质 , 所 以 这 些 
applet 应 该 能 够 在 任何 支持 Java 的 浏览 器 中 以 相同 的 方式 运行 ,在 近 几 年 中 ,我 们 看 到 许多 Java applet 
被 Adobe Flash 动画 替代 了 ， 因 为 一 般 来 说 Adobe Flash 动画 比 Java applet 更 容易 创建 。 近 几 年 来 ， 随 
着 计算 处 理 速度 和 浏览 器 中 JavaScript 功能 的 不 断 提升 ,在 客户 端 使 用 Java ( 和 Flash ) 的 情况 越 来 越 
少 。 然 而 ，Java 已 经 成 为 一 种 在 服务 器 端 编写 代码 的 流行 语言 。 

可 以 使 用 cobject> HTML 标签 将 Java applet 能 入 网 页 ， 还 要 提供 指定 applet 的 附加 信息 。 当 浏览 
器 看 到 <object> 标 签 时 ， 它 会 从 服务 器 下 载 Java applet， 然 后 applet 就 会 在 这 个 标签 中 指定 的 屏幕 区 
域 中 运行 ( 见 图 1-1 )。 
































































































































1.4 JavaScript 可 以 做 什么 





Bie Edit View History Bookmarks Tools Help 


c A | 


Checkers Game Java 





图 1-1 这 个 Java applet 实现 了 一 种 西洋 跳棋 游戏 


1.8 JavaScript 的 起 源 


既然 JavaScript 与 Java ER, 那么 为 什么 它们 的 名 称 如 此 相似 呢 ? 这 是 计算 机 行业 最 烦人 的 恶习 


之 一 : 为 了 获得 市 场 营销 方面 的 成 功 ， 而 不 顾及 产品 实质 。 











当 Netscape 在 其 Navigator Web 浏览 器 中 添加 了 一 些 基 本 脚本 功能 时 ， 它 最 初 将 这 种 脚本 语言 称 
为 LiveScript。 与 此 同时 ，Java 开始 大 行 其 道 , 它 被 认为 是 计算 行业 中 下 一 项 伟大 的 革新 。 当 Netscape 
在 Navigator 2 中 支持 运行 Java applet 时 ， 它 也 将 LiveScript WAX JavaScript, 希望 以 此 借用 Java 的 
声势 。 尽 管 JavaScript 和 Java 是 非常 不 同 的 编程 语言 ,但 这 一 事实 并 没有 阻止 Netscape 采用 这 种 市 场 
营销 手段 。 从 那 时 候 开 始 ， 我 们 这 些 技术 作家 只 好 不 厌 其 烦 地 解释 JavaScript 和 Java 是 不 同 的 东西 。 



































当然 ， 我 们 靠 这 挣 了 不 少 钱 ， 从 这 个 角度 来 说 ， 我 们 可 能 应 该 感谢 这 些 市 场 营销 专家 。 





当 微软 公司 看 到 JavaScript 在 Web 开发 人 员 中 流行 起 来 时 ， 它 意识 到 必须 在 TE 中 添加 一 些 脚 本 
功能 。 它 原本 可 以 采用 JavaScript， 但 是 与 通常 情况 一 样 ， 微 软 公司 又 自行 其 事 ， 建 立 了 自己 的 脚本 








语言 ， 这 种 语言 非常 像 JavaScript， 但 又 不 完全 相同 。JavaScript 的 微软 版 本 称 为 JScript。 


1.4 JavaScript 可 以 做 什么 


用 JavaScript 可 以 做 许多 事情 , 使 网 页 更 具 交 互 性 , 给 站 点 的 用 户 提 供 更 好 、 更 令 人 兴奋 的 体验 。 























JavaScript 使 你 可 以 创建 活路 的 用 户 界面 ， 当 用 户 在 页 面 间 导 航 时 向 他 们 提供 反馈 。 例 如 ， 你 可 色 
用 了 




















一 些 站 点 上 见 过 ， 当 鼠标 指针 停留 在 按钮 上 时 ， 会 突出 显示 按钮 。 这 是 用 JavaScript 实现 的 ,使 
一 种 称 为 翻转 器 (rollover ) 的 技术 ( 见 图 1-2 )。 

















FORUMS | 
a dy 


图 1-2 ”翻转 器 是 一 个 当 鼠 标 指针 停留 在 其 上 时 会 改变 的 图 像 


ETE 

















4 第 1 章 了 解 JavaScript 








可 以 使 用 JavaScript 来 确保 用 户 以 表单 形式 输入 有 效 的 信息 ， 这 可 以 节省 你 的 业务 时 间 和 开支 。 














如 果 表 单 需要 进行 计算 ， 那 么 可 以 在 用 户 机 器 上 用 JavaScript 来 完成 ， 而 不 需要 作 

















E 何 服务 右 端 处 理 。 











你 应 该 知道 一 种 区 分 程序 的 方式 : 在 用 户 机 器 上 运行 的 程序 称 为 客户 端 (client-side ) 程序 ,在 服务 器 


上 运行 的 程序 称 为 服务 器 端 (server-side ) 程序 。 

















使 用 JavaScript， 根 据 用 户 的 操作 可 以 创建 自 定义 的 Web 页 面 。 假 设 你 正在 运行 一 个 旅行 指南 站 


点 ,用户 单 击 夏威夷 作为 旅游 目的 地 。 你 可 以 在 一 个 新 窗口 中 显示 最 新 的 夏威夷 旅游 指南 。JavaScript 






































息 。 因 为 JavaScript 有 一 套 日 期 和 时 间 特 性 ， 可 以 生成 时 钟 、 日 历 和 时 间 戳 文档。 




















JavaScript 还 可 以 处 理 表 单 ， 设 置 cookie， 即 时 构建 HTML 页 面 以 及 创建 基于 Web 的 应 


1.5 JavaScript 不 能 做 什么 





可 以 控制 浏览 右 ， 所 以 你 可 以 打开 新 窗口 、 显 示警 告 框 以 及 在 浏览 絮 窗 口 的 状态 栏 中 显示 自 定义 的 消 











用 程序 。 








JavaScript 是 一 种 客户 端 语言 "。 也 就 是 说 ， 设 计 它 的 目的 是 在 用 户 的 机 器 上 而 不 是 服务 器 上 执行 








任务 。 因 此 ，JavaScript 有 一 些 固 有 的 限制 ， 这 些 限制 主要 出 于 如 下 安全 原因 。 








O JavaScript 不 允许 写 服 务 器 机 器 上 的 文件 。 尽 管 写 服 务 器 上 的 文件 在 许多 方面 是 很 方便 的 ( 比 
如 存储 页 面 单 击 数 或 用 户 填写 的 表单 数据 ), 但 是 JavaScript 不 允许 这 么 做 。 而 是 需要 用 服务 器 
上 的 一 个 程序 处 理 和 存储 这 些 数 据 ， 这 个 程序 可 以 是 用 Java、Perl 或 PHP 等 语言 编写 的 。 























站， 从 而 独占 浏览 絮 。 

















1.6 JavaScript 及 其 他 


1.6.1 jQuery 是 什么 

待 你 多 为 几 个 项 目 编 写 点 JavaScript 代码 后 ， 你 很 可 能 会 
的 东西 
段 ， 那么 你 的 感觉 非常 正确 一 一 很 多 程序 员 的 想法 跟 你 一 样 。 





























口 JavaScript 不 能 关闭 不 是 由 它 自 己 打开 的 窗口 。 这 是 为 了 避免 一 个 站 点 关闭 其 他 任何 站 点 的 窗 


O JavaScript 不 能 从 来 自 另 一 个 服务 器 的 已 经 打开 的 网 页 中 读 取信 息 。 换 句 话 说， 网 页 不 能 读 取 
已 经 打开 的 其 他 窗口 中 的 信息 ， 因 此 无 法 探 察 访问 这 个 站 点 的 冲浪 者 还 在 访问 其 他 哪些 站 点 。 


发 现 自己 总 会 反复 不 断 地 编写 某 些 一 样 
例如 ， 针 对 不 同 浏览 器 的 解决 方案 。 如 果 你 觉得 应 该 存在 更 好 的 方式 处 理 这 些 常 用 的 代码 


为 了 更 方便 地 针对 已 解决 的 问题 套用 已 编写 好 的 代码 , 程序 员 将 他 们 的 代码 段 捆 绑 i 到 所 谓 的 工具 








包 、 库 或 者 框架 中 。 这 类 东西 很 多 ，jQuery 是 其 中 最 常用 的 一 种 (jquery.com )。 























说 到 这 里 你 可 能 已 经 猜 到 了 ,jQuery 本 身 并 不 是 一 种 语言 ， 而 是 一 个 实用 程序 和 控件 集 

















以 将 它 添加 到 JavaScript 中 ， 帮 助 我 们 用 更 少量 的 代码 编写 更 高 级 的 站 点 。 
本 书 第 14 ~ 16 章 会 详细 讲解 jQuery。 











1.6.2 ”Ajax 是 什么 








， 我 们 可 


简单 的 回答 是 ，Ajax 是 一 种 创建 交互 式 Web 应 用 程序 的 方式 。 这 究竟 是 什么 意思 呢 ? 我 们 来 考 





(D 实际 上 ， 也 存在 服务 器 端 实现 的 JavaScript 版 本 ， 如 Rhino. 编者 注 
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虑 一 下 可 能 通过 Web 站 点 做 的 事情 。 例 如 , 你 可 能 想 和 自己 的 爱人 出 去 吃饭 (没有 爱人 的 可 能 要 和 月 
己 的 朋友 、 亲 不 或 宠物 一 起 去 吃饭 。 大 部 分 人 不 会 和 宠物 出 去 吃饭 ， 我 们 就 这 么 一 说 )。 所 以 ， 你 希 
望 知道 如 何 从 当前 的 地 点 到 达 市 内 大 家 都 在 谈论 的 那 家 有 名 的 新 餐馆 。 你 决定 到 一 个 提供 地 图 的 Web 
站 点 上 查找 路 线 。 你 会 进入 这 个 站 点 , 输入 餐馆 的 地 址 ， 站 点 会 显示 一 张 标 出 了 这 个 餐馆 的 地 图 。 这 
个 站 点 会 显示 带 边框 的 地 图 ， 如 果 和 希望 改变 地 图 的 视 域 ， 那么 可 以 单 击 边 杠 。 单 击 边框 ， 等 大 约 5 ~ 10 
秒 ， 地 图 就 会 重新 绘制 ， 如 果 和 希望 再 次 改变 视 域 ， 就 重复 操作 。 这 个 过 程 很 慢 ， 而 且 响 应 性 很 差 。 如 
果 只 是 单 击 地 图 并 向 希望 的 方向 拖 动 它 ， 地 图 视 域 就 会 随 着 鼠标 拖 动 而 移动 ， 那 不 是 更 好 吗 ? 
可 以 通过 用 Ajax 构建 的 Web 应 用 程序 向 用 户 提 ” 一 
供 这 种 动态 的 交互 性 ( 见 图 1-3). 这 样 的 话 , 用 户 几 | im " Jajee 
乎 不 需要 等 待 , 并 一 直 有 控制 能 力 , 而 且 可 以 创建 具 e 2 EL. 
有 与 传统 桌面 应 用 程序 相同 用 户 体验 的 基于 Web 的 A s umm 
应 用 程序 。 这 样 , 用户 就 能 够 更 快 、 更 轻松 地 查 明 如 h xm {== WB 
可 从 家 到 达 那 家 有 名 的 餐馆 。 i 
Ajax 是 Asynchronous JavaScript and XML ( 异步 
JavaScript 和 XML ) 的 缩写 , 这 个 词 是 由 Web 开发 人 A 
员 Jesse James Garrett 在 2005 年 年 初 首创 的 。 严 格 地 局- \ 
Bi, Ajax 只 是 JavaScript 的 一 小 部 分 ( 只 是 这 一 部 分 
特别 流行 )。 但 是 ， 随 着 频繁 地 使 用 ， 这 个 词 不 再 指 
某 种 技术 本 身 ( 比如 Java 或 JavaScript ). 
在 大 多 数 情况 下 ，Ajax 一 般 是 指 以 下 这 些 技 术 的 组 合 : 
QO) HTML; 
O CSS ( Cascading Style Sheet， 层 县 样式 表 ); 
O 使 用 JavaScript 访问 的 DOM ( Document Object Model， 文 档 对 象 模型 ); 
O XML 或 JSON， 这 是 在 服务 器 和 客户 端 之 间 传 输 的 数据 格式 ; 
口 XMLHttpRequest， 用 来 从 服务 器 获取 数据 。 
这 个 列表 有 点 儿 复杂 ， 尤 其 是 对 于 在 JavaScript 或 其 他 Web 编程 方面 经 验 不 太 丰 富 的 人 。 但 是 ， 
不 必 担 心 ， 我 们 在 本 书 中 会 介绍 这 些 技术 。 在 学 到 关于 Ajax 的 章节 时 ， 你 应 该 已 经 掌握 了 组 成 Ajax 
的 各 种 技术 。 
Ajax 的 好 处 是 , 应 用 程序 的 大 多 数 处 理 在 用 户 的 浏览 器 中 发 生 , 而 且 对 服务 器 的 数据 请 求 往往 很 
短 。 所 以 可 以 使 用 Ajax 建立 功能 丰富 的 应 用 程序 ， 这 些 应 用 程序 依赖 基于 Web 的 数据 ， 但 是 其 性 能 
远 远 超过 老式 方法 ， 因 为 老式 方法 要 求 服务 器 传 回 整个 HTML 页 面 来 响应 用 户 操作 。 
一 些 公司 已 经 在 Ajax 方面 投入 大 量 资金 ， 尤 其 是 谷歌 。 谷 歌 已 经 建立 了 几 个 著名 的 Ajax 应 用 程 
序 ， 包 括 Gmail ( 基于 Web 的 电子 邮件 )、Google Calendar, Google Docs 和 Google Maps。 男 一 个 大 
型 的 Ajax 支持 者 是 Yahoo!， 它 使 用 Ajax 增强 个 性 化 的 My Yahool! 门 户 、Yahoo! 首 页 Yahoo! Mail, 
等 等 。 这 两 家 公司 都 向 公众 开放 了 其 Web 应 用 程序 的 接口 , 人 们 可 以 使 用 这 些 接口 建立 有 意思 的 新 应 
用 程序 。 例 如 ， 许 多 人 为 Google Maps 创建 了 mashup ( 混搭 )， 这 些 程序 会 获得 地 图 并 在 地 图 上 加 上 
有 意思 、 有 用 或 好 玩 的 信息 ， 比 如 洛杉矶 地 区 所 有 日 本 餐馆 的 位 置 或 电影 摄影 棚 的 位 置 。 
第 13 章 会 更 详细 地 介绍 Ajax。 

































































































































































=> 


























b=) 


图 1-3 支持 Ajax 的 Google Maps 可 以 提供 更 
流畅 更 具 交 互 性 的 用 户 体验 
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V 提示 
口 在 Google Maps Mania ( googlemapsmania.blogspot.com ) 上 可 以 找到 许多 Google Maps mashup 
的 列表 。 


17 ”组 合式 语言 
还 有 一 点 我 们 应 该 注意 : JavaScript 是 一 种 面向 对 象 ( object-oriented ) 的 语言 。 这 意味 着 什么 呢 ? 


1.7.1 WR 


首先 ， 我 们 来 考虑 对 象 。 对 象 (object) 就 是 某 种 东西 。 在 现实 中 ， 一 只 猫 、 一 台 计 算 机 和 一 辆 
自行 车 都 是 对 象 ( 见 图 1-4 )。 对 于 JavaScript， 它 处 理 的 对 象 都 在 Web 浏览 右 中 ， 比 如 窗口、 表单 ， 
以 及 按钮 和 复 选 框 等 表单 元 素 ( 见 图 1-5 )。 
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— a n à; 图 1-5 按钮 和 复 选 框 是 浏览 器 对 象 ， 
图 1-4 ” 猫 对 象 (这 只 猫 名 叫 Pixel ) 可 以 用 JavaScript 来 操纵 


因为 你 可 以 有 多 只 猫 或 者 多 个 窗口 ,所 以 给 它们 起 名 字 是 有 意义 的 。 你 可 以 把 自己 的 宠物 叫 作 一 
号 猫 和 二 号 猫 ， 但 是 这 不 是 一 种 好 想法 ， 原 因 有 两 个 : 首先 ， 如 果 它 们 有 唯一 的 名 称 ， 就 更 容易 区 分 
它们 ; HK, 这 有 点 不 礼貌 。 因 此 ， 本 书 中 的 所 有 示例 将 给 对 象 起 唯一 的 名 字 。 
V 提示 
D 在 因特网 上 可 能 会 看 到 一 些 脚本 用 window[0] 和 form[1] 这 样 的 名 称 来 称呼 对 象 。 由 于 以 上 原因 ， 
这 种 方式 并 不 好 。 如 果 给 脚本 中 的 不 同 对 象 起 名 字 ， 而 不 是 使 用 数字 ,那么 跟踪 对 象 会 容易 
得 多 。 

O 有 些 爱 挑 剔 的 程序 员 会 认为 ，JavaScript 不 是 面向 对 象 的 ， 而 是 基于 对 象 ( object-based ) 的 。 
在 本 书 中 ， 这 两 个 意思 相同 。 






















































































1.7.2 属性 


对 象 具有 属性 〈property )。 猫 有 毛皮 ， 计 算 机 有 键盘 ， 自 行车 有 轮子 。 在 JavaScript 环境 中 , 文 
档 有 标题 ， 表 单 可 以 有 复 选 框 

改变 对 象 的 属性 就 修改 了 这 个 对 象 , 相 同 的 属性 名 可 以 用 于 完全 不 同 的 对 象 ,假设 有 一 个 名 为 empty 
的 属性 。 在 任何 合适 的 地 方 都 可 以 使 用 empty， 所 以 可 以 说 猫 的 肚子 空 了 ， 也 可 以 说 猫 的 食 盆 空 了 。 


m 
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loj 
注意 ， 


所 以 ， 对 象 可 以 有 子 对 象 。 


1.7.3 方法 


计算 机 的 键盘 和 自行 车 的 轮子 不 仅仅 是 属性 ， 它 们 本 身 也 是 对 象 ， 可 以 具有 自己 的 属性 。 oS 


























对 象 可 以 做 的 事情 称 为 方法 (method )。 猫 会 叫 ， 计 算 机 会 骨 泪 ， 自 行车 可 以 前 进 。JavaScript 对 象 





也 有 方法 : 按钮 的 click(), 窗口 的 open(), 文本 的 selected()。 圆 括号 表示 它们 是 方法 ， 而 不 是 属性 。 





v 提示 

















口 可 以 把 对 象 和 属性 看 作 名 词 ， 把 方法 看 作 动 词 。 前 者 是 东西 ， 后 者 是 这 些 东西 可 以 完成 的 活动 


或 对 它们 执行 的 操作 。 
1.7.4 将 对 象 、 属 性 和 方法 组 合 在 一 起 





可 以 将 对 象 、 属 性 和 方法 组 合 在 一 起 ， 从 而 更 好 地 描述 对 象 或 过 程 。 在 JavaScript 中 ， 这 些 成 分 




















象 及 其 属性 的 一 些 示 例 : 


bicycle.wheels 
cat.paws. front. left 
computer. drive.dvd 
document. images . name 
window. status 


下 面 是 按照 点 号 语法 编写 的 对 象 及 其 方法 的 一 
些 示例 : 


cat.purr() 
document .write() 
forms.elements.radio.click() 


























1.7.5 “DOM 简 介 


在 网 页 上 ,组 成 页 面 (或 文档 ) 的 对 象 被 组 织 在 
一 个 树 型 结构 中 。 在 以 前 构建 HTML 页 面 的 时 候 ， 
你 已 经 知道 这 种 结构 了 。 页 面 的 顶级 包含 在 <chtml> 标 
签 中 ， 在 其 中 会 找到 <head> 和 <body> 标 签 ， 而 其 他 标 
签 包含 在 这 两 个 标签 中 , 依次 类 推 。 某 些 浏览 器 可 以 
显示 这 种 树 型 结构 , 如 图 1-6 所 示 。JavaScript 将 文档 
树 中 的 每 一 项 都 当 作对 象 ， 可 以 使 用 JavaScript 操纵 
这 些 对 象 。 用 来 表示 文档 中 对 象 的 标准 模型 就 称 为 
DOM ( Document Object Model， 文 档 对 象 模 型 )。 

树 中 的 每 个 对 象 也 称 为 树 的 节点 (node )。 可 以 
使 用 JavaScript 修改 树 的 任何 方面 , 包括 添加 、 访问 、 
修改 和 删除 树 上 的 节点 。 树 上 的 每 个 对 象 是 一 个 节 





















































1 点 号 分 隔 ( 就 像 因特网 地 址 中 的 那样 )。 这 称 为 点 号 语法 (dot syntax )。 下面 是 按 这 种 方式 编 























写 的 对 
— — 
7 - INI - 
D> Document - DOM Nodes EJ > Ohjeet -DOM Node 
= ao - 
一 
Iu - ———— 
1-6 可 以 使 用 DOM Inspector ( Firefox 的 一 个 


插件 ) 查看 文档 的 树 型 结构 。 在 Safari, 
Chrome 和 TE 中 也 有 相似 的 特性 








"m 
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点 。 如 果 节 点 包含 HTML 标签 , 那么 它 就 称 为 元 素 节点 (element node), BW, UK SCR A (text 
node )， 当 然 ， 元 素 节 点 可 以 包含 文本 节点 。 这 就 是 目前 关于 DOM 和 节点 需要 知道 的 所 有 知识 ,在 本 











书 中 (尤其 是 第 10 章 ) 会 看 到 关于 它们 的 更 多 信息 。 
1.8 处理 事件 








事件 (event) 是 用 户 在 访问 页 面 时 执行 的 操作 。 提 交 表 单 和 在 图 像 上 移动 鼠标 就 是 两 种 事件 。 
JavaScript 使 用 称 为 事件 处 理 程序 ( event handler ) 的 命令 来 处 理事 件 。 用 户 在 页 面 上 的 操作 会 触 
发 脚本 中 的 事件 处 理 程序 。 表 1-1 列 出 了 最 常用 的 12 种 JavaScript 事件 处 理 程序 。 在 第 8 rp, FET 








会 讨论 其 他 更 高 级 的 事件 处 理 程序 。 





表 1-1 事件 处 理 程序 





















































Ss d 处 理 什么 
onabort 用 户 终止 了 页 面 的 加 载 
onblur 用 户 离 开 了 对 象 
onchange 用 户 修 改 了 对 象 
onclick 用 户 单 击 了 对 象 
onerror 基本 遇 到 了 一 个 错误 
onfocus 用 户 激活 了 对 象 
onload 对 象 完成 了 加 载 
onmouseover 鼠标 指针 移动 到 对 象 上 
onmouseout 鼠标 指针 离开 了 对 象 
onselect 用 户 选 择 了 对 象 的 内 容 
onsubmit 用 户 提交 了 表单 
onunload 用 户 离开 了 页 面 

例如 ， 猫 就 可 以 通过 执行 purr ( 打 呼噜 ) 和 stretch ( (HIE ) 操作 来 处 理 onpetting (亲热 ) 

















事件 。 
在 JavaScript 中 ， 如 果 用 户 单 击 了 一 个 按钮 ， 那 么 onclick 
执行 分 配给 它 的 任务 。 

















pun 


dint 








和 件 处 理 程序 会 注意 到 这 一 操作 ， 并 





在 编写 脚本 时 , 不 必 预 测 出 用 户 可 能 采取 的 所 有 操作 , 只 需 处 理 那 些 你 希望 提供 特殊 处 理 的 事件 。 

















例如 ， 如 果 没 有 onload 事件 处 理 程序 ， 页面 也 会 顺利 地 加 载 。 但是， 
脚本 ， 就 要 使 用 onload 命令 。 


1.9 值 和 变量 


在 JavaScript 中 ,一 段 信息 就 是 一 个 值 (value ),。 值 有 不 同 的 类 




















如 果 希 望 在 加 载 页 面 时 触发 一 个 











型 ， 大 家 最 熟悉 的 类 型 是 数字 。 字 


符 串 〈string ) 值 是 包围 在 引号 中 的 一 个 或 多 个 单词 。 表 1-2 列 出 了 JavaScript 值 的 其 他 类 型 。 
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表 1-2” 值 类 型 

类 型 描述 示 Ol 
数字 任何 数字 值 3.141592654 
字符 串 引号 中 的 字符 "Hello, world!" 
布尔 值 (Boolean) true 或 false true 
空 值 (null) 空 且 无 含义 
WR 与 对 象 相 关联 的 任何 值 
函数 函数 返回 的 值 

















变量 (variable) 是 用 来 保存 值 的 。 例 如 ， 变 量 myName 被 赋值 为 字符 串 "Dori"。 编 写 这 一 赋值 的 
一 种 方式 是 myName="Dori"。 等 写 可 以 读 作 “设置 为 "。 换 句 话 说 ， 变 量 myName 现在 包含 值 "Dori"。 
V 提示 
口 JavaScript 是 区 分 大 小 写 的 。 这 意味 着 myname 与 myName 并 不 相同 ， 也 与 MyName 不 相同 。 
口 变量 名 不 能 包含 空格 或 其 他 标点 符号 ， 也 不 能 以 数字 开头 。 它 们 还 不 能 是 JavaScript 保留 字 。 
附录 B 列 出 了 JavaScript 保留 字 。 


1.9.1 RESI 


操作 符 ( operator) 是 用 来 操作 变量 的 符号 。 你 应 该 已 经 熟悉 简单 算术 中 的 操作 符 ， 加 号 和 减 号 就 
是 操作 符 。 表 1-3 列 出 了 大 多 数 常 见 的 操作 符 。 


表 1-3 ”操作 符 





























操 作 符 作 用 
x+y (A+) 将 x 和 y 相 加 
x + y (字符 串 ) 将 x 和 y 拼 接 在 一 起 
x-y 从 x 中 减 去 y 
x*y 将 x 和 y 相 乘 
x/y 将 x 除 以 y 
x X y x 和 y 的 模 〈 即 x 除 以 y 的 余数 ) 
X++, HEX 给 x 加 1 (相当 于 x = x + 1) 
X--、--X 给 x 减 1 (相当 于 x = x - 1) 
-x x 的 相反 数 


V 提示 

O x++ 和 ++x 都 是 给 x 加 1， 但 是 它们 并 不 相同 。 前 者 在 完成 赋值 之 后 再 将 x 加 1， 而 后 者 将 x 加 
1 之 后 再 赋值 。 例 如 ， 如 果 x 是 5，y=x++ 会 将 y 设置 为 5，x 设置 为 6; 而 y=++x 会 将 x 和 y 都 
设置 为 6。 递 减 操作 符 -- 的 工作 方式 相似 。 

O 如 果 数 字 和 字符 串 相 加 ， 那么 结果 是 一 个 字符 串 。 例 如 ，"cat"+5 的 结果 是 "cat5"。 


1.9.2 ”赋值 和 比较 
在 将 一 个 值 放 进 变量 中 时 ， 就 是 将 这 个 值 赋 给 这 个 变量 ， 这 个 任务 要 使 用 赋值 操作 符 来 完成 。 例 





















































ye 
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如 ， 使 用 等 号 操作 符 进 行 赋值 ， 比 如 hisName="Tom"。 表 1-4 列 出 了 所 有 的 赋值 操作 符 。 








表 1-4 ”赋值 
值 作 用 
x=y 将 x 设 置 为 y 的 什 
x+y 相当 于 x = x+y 
xs 相当 于 x =x- y 
X *= 相当 于 x -x*y 
Tue 相当 于 x = x / y 
x he y 相当 于 x = x Xy 
除 等 号 之 外 ,其 他 赋值 操作 符 都 是 用 来 修改 变量 值 的 简写 形式 。 例如，x=x+5 的 简写 形式 是 x+=5。 








为 清楚 起 见 ， 本 书 中 的 大 多 数 地 方 都 使 用 非 简 写 形式 。 


1.9.3 比较 


常常 需要 对 两 
进行 比较 ,例如 ,可 








个 变量 的 值 进行 
能 希 








来 完成 。 比 较 操作 符 的 完整 列表 见 表 1-5。 


表 1-5 ”比较 


较 ， 或 者 将 一 个 变量 的 值 与 一 个 字 
望 将 周 中 日 的 值 与 "Tuesday "进行 比 较 , 这 可 以 通过 检查 todaysDate=="Tuesday" 














BL EE C 即 输入 表达 式 中 的 值 ) 





V 提示 














比 较 作 用 

xay 如 果 x 和 y 相 等 ， 那 么 返回 true 

MEE y 如 果 x 和 y 完 全 相同 ， 那 么 返回 true 
Rey: 如 果 x 和 y 不 等 ， 那 么 返回 true 
bs 如 果 x 和 y 不 完全 相同 ， 那 么 返回 true 
ARY 如 果 x 大 于 y， 那 么 返回 true 

NY 如 果 x 大 于 等 于 y， 那 么 返回 true 
ARY 如 果 x 小 于 y， 那 么 返回 true 

如 果 x 小 于 等 于 y， 那 么 返回 true 

如 果 x 和 y 都 是 true， 那 么 返回 true 
xIly 如 果 x 或 y 之 一 是 true， 那 么 返回 true 
Ix 如 果 x 是 false， 那 么 返回 true 





O 如 果 对 字符 串 进行 比较 ， 那 么 要 知道 "a" 大 于 "A"，"abracadabra" 小 于 "be"。 


1.10 


编写 对 JavaScript 友好 的 HTML 


因为 将 使 用 JavaScript 操纵 文档 中 的 对 象 ， 所 以 希望 以 适当 的 方式 编写 HTML 
地 处 理 HTML。 这 基本 上 意味 着 要 编写 现代 的 符合 标准 的 HTML， 并 使 用 CSS 将 文档 的 结构 与 它 的 





表现 分 隔 开 。 


























， 使 脚本 能 够 轻松 
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我 们 说 “现代 的 HTML” 的 意思 不 仅仅 指使 用 validatorw3.org 上 的 Web 工具 进行 W3C 检验 ， 还 
应 该 提前 考虑 可 能 对 页 面 进行 什么 操作 ， 并 添加 适当 的 标签 和 属性 ， 使 JavaScript 能 够 轻松 地 访问 对 
象 。 需 要 哪些 标记 呢 ? 很 高 兴 你 这 么 问 。 


1.10.1 结构、 表现 和 行为 


CSS 是 一 种 用 于 Web 的 标准 布局 语言 ,可 以 控制 版 面 .颜色 以 及 元 素 和 图 像 的 大 小 和 位 置 。HTML 
文档 应 该 利用 外 部 样式 表 来 定义 文档 中 使 用 的 样式 。JavaScript 也 应 该 放 在 外 部 文档 中 ， 这 个 文档 应 
该 只 包含 JavaScript 代码 。 

按照 这 种 方式 进行 分 离 ， 站 点 将 包含 以 下 3 种 文本 文件 。 

O HTML: 包含 页 面 的 内 容 和 结构 。 

O CSS: 控制 页 面 的 外 观 和 表现 。 

口 JavaScript: 控制 页 面 的 行为 。 

如 果 这 么 做 ， 对 站 点 进行 修改 就 会 很 容易 ， 甚 至 修改 全 站 点 范围 的 效果 也 很 容易 。 
















































































1.10.2 div 和 span 


HTML 有 两 个 用 来 标 出 范围 的 标签 : <div> 和 <span>。 它 们 用 来 将 内 容 划分 成 语义 性 (semantic ) 
的 块 ， 也 就 是 具有 相似 含义 (meaning) 的 块 。 一 个 表格 单元 格 或 段落 中 的 内 容 可 能 具有 共同 点 ， 也 
可 能 没有 ， 但 是 每 个 cdiv> 和 <span> 中 的 内 容 应 该 具有 相似 的 含义 。 

那么 ，<div> 和 <span> 有 什么 区 别 呢 ?<div> 是 一 个 块 级 (block-level ) 元 素 ， 也 就 是 说 ， 它 与 前 后 
元 素 之 间 有 物理 换行 。 但 <span> 不 是 块 级 的 ， 它 是 行内 的 (inline )， 所 以 可 以 将 它 应 用 于 句子 中 的 一 


个 短语 。 

















1.10.3 class 和 id 


TE HTML 文档 中 , 将 内 容 分 隔 为 这 些 有 意义 的 块 。 但 是 在 此 之 后 , 仍然 需要 标识 出 那些 需要 修改 
其 表现 或 行为 的 内 容 片 段 。 为 此 ， 主 要 使 用 两 个 属性 : class 和 id。CSS 和 JavaScript 都 可 以 利用 这 
些 属性 。CSS 样式 表 在 规则 中 使 用 这 些 属性 定义 页 面 的 外 观 ， 而 JavaScript 文件 在 代码 中 使 用 这 些 属 
性 来 影响 页 面 上 元 素 的 行为 。 
口 X (class) 标识 出 可 能 会 多 次 使 用 的 元 素 。 例 如 ,假设 你 要 为 电影 院 编写 一 个 页 面 。 可 以 为 电 
影 标题 定义 一 个 类 ， 然 后 通过 这 个 类 指定 标题 应 该 是 14 像素 、 粗 体 和 深蓝 色 的 。 
-movieTitle { 


font: bold 14px; 
color: #000099; 

























































































应 该 将 页 面 上 的 每 个 电影 标题 包围 在 一 个 标签 中 ,并 指定 这 个 标题 类 型 的 class 属性 ,如 下 所 示 : 


<p>We're currently showing «span class="movieTitle">The Aviator</span> and <span class="movieTitle"> 
*The Outlaw</span>.</p> 


O id 标识 出 的 元 素 对 于 文档 是 唯一 的 。 例 如 ， 如 果 在 页 面 上 电影 院 的 名 称 只 出 现 一 次 ， 那 么 可 
以 使 用 id 创建 一 个 样式 规则 ， 定 义 电影 院 名 称 的 外 观 是 什么 样 的 ， 如 下 所 示 : 











12 $13 Tf JavaScript 





#theaterName { 
font: bold 28px; 
color: #FF0000; 


} 
要 显示 电影 院 的 名 称 时 ， 只 需 在 受 影响 的 标签 中 添加 这 个 id 属性 : 
<h1 id="theaterName">The Raven Theater Presents:«/hi» 
上 面 示例 中 用 于 CSS 的 手段 也 可 以 应 用 于 JavaScript, E4 div 和 span (或 任何 其 他 元 素 ) 分 配 
了 class 和 id 之 后 ， 就 可 以 修改 这 些 元 素 : 不 但 可 以 用 CSS 修改 它们 的 外 观 ， 还 可 以 用 JavaScript 
修改 它们 的 行为 。 本 书 的 其 余部 分 主要 讨论 这 个 主题 。 



































v 提示 
O 有 些 人 可 能 会 在 CSS 中 使 用 # 和 .时 出 现 混 奖 ， 因 为 他 们 想 不 起 哪个 符号 用 于 class， 哪 个 符号 
用 于 id。 我 们 的 记忆 方法 是 : 在 给 定 的 页 面 上 , 一 个 id 只 能 出 现 一 次 。“1” 是 一 个 数字 ， 而 





HF H) 也 称 为 数字 符 ， 所 以 这 个 符号 用 于 id. 


1.11 要 使 用 什么 工具 


因为 JavaScript 只 是 纯 文本 ,所 以 可 以 使 用 几乎 任何 文本 编辑 器 来 编辑 JavaScript。 甚 至 可 以 使 用 
Microsoft Word 这 样 的 字 处 理 程序 ， 但 是 一 定 要 确保 Word 将 文件 保存 为 Text Only， 而 不 是 采用 它 自 
己 的 文件 格式 。HTML、JavaScript 和 CSS 文件 必须 是 纯 文本 格式 的 , 这 样 Web 浏览 器 才能 理解 它们 。 

最 好 是 使 用 以 纯 文 本 作为 标准 格式 的 程序 。 在 Windows 上 ,许多 人 使 用 记事 本 ( 见 图 1-7 )。 在 
Mac E, PUE TextEdit, 但 是 专业 人 员 喜 欢 Bare Bones 软件 公司 开发 的 BBEdit ( 见 图 1-8), TE 
Unix 机 器 上 ，Emacs 是 最 好 的 文本 编辑 器 之 一 。 无 论 你 使 用 什么 程序 ， 不 要 忘记 用 扩展 名 .html 、.css 
或 .js 保存 纯 文本 文件 ， 这 样 才能 顺利 地 将 文件 上 传 到 Web 服务 器 。 


ano 
T. * nm 




















for i-0; ie 
if (document. images [1] .parentNode, tagane == "A*] { 


Y function setupRollover|theInage) ( 
thelmage.outlmage = new Inage(}; 
theImage.outImage.srt = theleage. src 

at 





+ theImage.id + * on.gif*; 
1 








= a ES ’ theInage.om 

Untitled - Notepad EE this.sre = 
| Fle Ede Format View Help 
Window. onload = inital); ^ | 





function initA110) 
var aliLinks = document.gettlementsByTagName("a"); 
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图 1-7 Windows 7 上 的 记事 本 图 1-8 MacOSX 上 的 BBEdit 
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还 可 以 使 用 某 种 WYSIWYG ( What You See Is What You Get， 所 见 即 所 得 ) 的 HTML 编辑 器 ， 比 
如 Adobe Dreamweaver。 只 需 切 换 到 HTML Source 模式 ， 就 可 以 编写 脚本 了 。 
v 提示 
O 如 果 你 是 Mac 用 户 ， 那 么 试 试 Bare Bones 软件 公司 ( www.barebones.com ) 开发 的 TextWrangler. 
它 的 特性 不 如 BBEdit 那么 全 面 ， 但 是 它 有 一 个 大 优点 : 它 是 免费 的 。 
O 如 果 你 想 了 解 如 何在 Dreamweaver 中 使 用 代码 工具 的 更 多 内 容 ， 推 荐 你 阅读 我 们 著 的 
Dreamweaver CSS: Visual QuickStart Guide 一 书 。 
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身 够 了 ， 现 在 该 编写 脚本 了 。 在 本 章 中 ， 你 将 学 习 把 脚本 放 在 HTML 中 的 什么 位 置 ， 如 何 
AAA\ 在 脚本 中 编写 注释 ， 让 自己 在 过 了 一 段 时 间 之 后 仍然 能 够 轻松 地 理解 这 些 脚本 ， 以 及 如 何 
使 用 脚本 与 用 户 进行 通信 。 还 会 看 到 如 何 使 页 面 自动 地 转 到 另 一 个 页 面 ( 这 称 为 重 定 向 ，redirection )。 
我 们 开始 吧 ! 
目前 需要 了 解 的 HTML 基础 知识 见 表 2-1。 


表 2-1 目前 需要 了 解 的 HTML 知 识 







































































标 签 E 性 m ox 
html 包含 网 页 的 HTML 部 分 
head 包含 网 页 的 页 头 部 分 
script 包含 网 页 的 脚本 或 对 外 部 脚本 文件 的 引用 。 脚 本 常常 是 JavaScript 
src 外 部 脚本 的 位 置 
title 包含 网 页 的 标题 
body 包含 网 页 的 内 容 
h1...h6 这 些 标签 的 内 容 作为 标题 信息 。h1 是 最 大 尺寸 的 标题 ，h6 是 最 小 尺寸 的 标题 
a 链接 到 另 一 个 网 页 
href 指定 当 单 击 链接 时 ， 用 户 应 该 转 到 哪里 














2.1 将 脚本 放 在 哪里 


脚本 可 以 放 在 HTML 页 面 上 的 两 个 位 置 : <head> 和 </head> 标 签 之 间 ( 称 为 头 脚 本 , header script ), 
或 者 cbody> 和 </body> 标 签 之 间 ( 体 脚 本 ，body script )。 脚 本 2-1 是 体 脚本 的 一 个 示例 。 


脚本 2-1 脚本 总 是 需要 包围 在 cscript> 和 </script> HTML 标签 之 间 


<!DOCTYPE html> 
<html> 
<head> 
<title>My first script</title> 
</head> 
<body> 
<h1> 
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<script> 
document .write("Hello, world!"); 


</script> 
«/h1» 
«/body» 
«/html» 


有 一 个 标 出 脚本 的 HTML 容器 标签 ， 这 个 标签 以 <script> 开 头 ， 以 </script> 结 束 。 


> 编写 第 一 个 脚本 
1. <script> 


这 是 script 开始 标签 告诉 浏览 器 后 面 的 代码 一 ee My first script e 
是 JavaScript 是 HTML, yc My first script nmm 
ipod SG https:// e (E-a) | 8) [te] LE) |) 
2. document .write("Hello, world!"); 


这 是 JavaScript 的 第 一 行 : 它 获得 文档 窗口 并 在 “| Hello, world! 
其 中 写 人 "Hello, world!"， 如 图 2-1 所 示 。 请 注意 这 
一 行 末尾 的 分 号 〈; )， 这 告诉 浏览 右 的 JavaScript 解 
PLE 4E ZN "but ye) ich 
CE FORT, TRON RE aan CAN 
. 传统 示例 ， 我 们 也 不 想 违反 传统 
3. </script> 
这 结束 JavaScript， 并 告诉 浏览 占 后 面 的 代码 是 HTML。 
V 提示 
O script 标签 的 language 属性 和 type 属性 (这 里 没有 使 用 ) 已 经 废弃 了 ,这 意味 着 W3C ( 负责 
的 标准 组 织 ) 已 经 将 这 个 属性 标记 为 在 标准 的 未 来 版 本 中 不 必 支 持 的 属性 , 但 还 有 不 少 旧 脚 本 
仍 在 使 用 它 。 
口 如 果 每 一 行 上 只 有 一 个 语句 , 那么 在 JavaScript 行 的 末尾 使 用 分 号 是 可 选 的 。 为 了 使 代码 清晰 ， 
我 们 在 本 书 中 坚持 使 用 分 号 (; )。 由 于 同样 的 原因 , 我 们 建议 你 养 成 在 代码 中 包含 分 号 的 习惯 。 
O 对 于 本 书 中 的 大 多 数 地 方 , 我 们 在 代码 解释 中 省 略 了 “script> 标 签 。 可 以 看 到 ,在 脚本 代码 中 
仍然 有 这 个 标签 ， 而 且 仍然 需要 它 ， 但 是 我 们 不 会 反复 解释 它 。 
口 一 个 页 面 上 可 以 有 任意 数量 的 <script> 标 签 ( 因此 有 多 个 脚本 )。 


22 ”关于 函数 


在 讲述 下 一 个 示例 之 前 ， 你 需要 了 解 一 下 函数 ， 在 编写 JavaScript 时 常常 要 用 到 它们 。 函 数 
( function ) 是 一 组 执行 某 一 任务 的 JavaScript 语句 。 每 个 函数 必须 有 一 个 名 称 〈 除 了 一 个 非常 少见 的 
例外 ， 这 会 在 本 书后 面 讨论 )， 并 可 被 脚本 的 其 他 部 分 调用 。 
在 脚本 运行 期 间 ， 可 以 根据 需要 调用 函数 任意 次 。 例 如 ， 假 设 你 已 经 获得 了 用 户 在 表单 中 输入 的 
一 些 信息 ,并 使 用 JavaScript 将 它 保 存 起 来 了 (在 第 6 章 中 提供 了 关于 这 类 问题 的 更 多 信息 )。 如 果 需 
要 一 次 又 一 次 地 使 用 此 信息 ,那么 可 以 在 脚本 中 反复 使 用 相同 的 代码 。 但 是 ， 更 好 的 方法 是 将 这 段 代 
码 编写 成 函数 ， 然 后 在 需要 的 时 候 调 用 这 个 函数 。 
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函数 由 单词 function 加 上 函数 名 组 成 。 函 数 名 后 面 是 圆 括 号 , 再 后 面 是 左 花 括号 。 组 成 函数 内 容 
的 语句 出 现在 后 面 的 行 上 ， 然 后 用 右 花 括号 结束 这 个 函数 。 函 数 的 形式 如 下 所 示 : 


function saySomething() { 
alert("Four score and seven years ago"); 


} 
注意 到 alert 所 在 的 行 缩 进 了 吗 ? 这 会 使 代码 更 易 读 。 第 一 个 花 括 号 和 最 后 一 个 花 括号 (你 会 注 
意 到 这 两 行 没有 缩 进 ) 之 间 的 所 有 语句 都 是 函数 部 分 。 这 就 是 目前 需要 知道 函数 方面 的 内 容 。 后 续 章 
节 会 介绍 函数 方面 的 更 多 内 容 。 


2.3 ”使 用 外 部 脚本 


在 HTML 页 面 上 直接 使 用 脚本 ( m ) 的 问题 是 脚本 只 能 供 当 前 页 面 使 用 。 因此 ， 
这 种 脚本 有 时 候 称 为 内 部 脚本 (internal script ) 但 是 , 经 常 希望 让 多 个 HTML 页 面 共享 一 个 脚本 。 这 
要 通过 包含 外 部 脚本 ( external script ) 的 引 enn 也 就 是 只 包含 JavaScript 的 单独 文件 。 这 些 外 部 
文件 称 为 js 文件 ， 因 为 无 论 它们 叫 什么 ， 文件 名 都 应 该 以 js 后 缀 结尾 。 各 个 页 面 只 需 在 script 标签 
Tim src 属性， 就 可 以 调用 .js 文件 。 

这 就 大 大 减少 了 每 个 页 面 上 的 代码 ， 更 重要 的 是 ， 这 会 使 站 点 更 容易 维护 。 当 需要 对 脚本 进行 修 

改 时 ， 只 需 修改 .js 文件 ， 所 有 引用 这 个 文件 的 HTML ius 会 自动 响应 修改 。 

在 第 一 个 外 部 脚本 示例 中 ， 脚 本 2-2 包含 引用 外 部 文件 的 HTML， 脚本 2-3 是 外 部 JavaScript 文件 。 


脚本 2-2 这 有 段 简单 的 HTML 在 script 标签 中 包含 对 外 部 JavaScript 文件 的 引用 


<!DOCTYPE html» 
<html> 
<head> 
<title>My second script</title> 
<script src="script02.js"></script> 
</head> 
<body> 
«hi id-"helloMessage"» 
«hi» 
«/body» 
«/html» 


脚本 2-3 第 一 个 外 部 JavaScript 文件 


window.onload = writeMessage; 









































































































































function writeMessage() { 
document.getElementById("helloMessage").innerHTML = "Hello, world!"; 


} 

=> 使 用 外 部 脚本 

1. <script src-"scriptO2.js"»«/script» 

这 一 行 在 脚本 2-2 中 。 在 script 标签 中 添加 src 属性 会 使 浏览 器 寻找 引用 的 文件 。 产 生 的 网 页 看 
起 来 就 像 将 脚本 直接 放 在 页 面 的 script 标签 中 一 样 ， 而 实际 上 脚本 放 在 外 部 的 js 文件 中 。 

使 用 外 部 脚本 只 需要 这 一 行 。 接 下 来 ， 我 们 看 看 这 个 脚本 中 的 内 容 。 
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2. window.onload = writeMessage; 


在 脚本 2-3 P, 这 一 行 的 第 一 部 分 window.onload 
等 号 后 面 是 一 个 函数 名 writeMessage。 这 一 行 的 意思 是 


3. function writeMessage() { 





H 








这 一 行 创 建 writeMessage() PRÉC, 
4. document.getElementById("helloMessage").innerHTML = "Hello, world!"; 








为 helloMessage. Jm É 


是 一 个 事件 处 理 程序 , 我们 在 第 1 章 中 讨论 过 了 。 























前 只 需 知 道 id 是 它 所 属 的 元 素 在 页 面 上 的 唯一 标识 符 。 换 








再 看 看 脚本 2-2， 就 会 发 现 有 一 个 <h1> 标 签 ， 它 的 id ms 
| 你 会 学 到 关于 id 的 更 多 知识 ， H AR My second script 
€ Q fi GB https://d... 7x 


^ 








句 话说， 在 给 定 的 页 面 上 ， 只 能 有 一 个 元 素 具 有 这 个 特定 
的 id。 这 使 JavaScript 很 容易 通过 使 用 getElementById() 
方法 来 获得 和 操作 这 个 元 素 。 innerHTML 


号 右边 的 字符 串 ， 


HTML 中 编写 了 这 个 字符 串 一 样 。 所 以 ， 这 行 JavaScript 
代码 的 意思 是 “获得 字符 串 'Hello，world!' ， 并 将 它 放 在 
1 名 为 helloMessage 的 元 素 中 ” 











文档 
BRA] 2-1 一 样 。 
V 提示 














属性 仅仅 是 获得 等 
并 将 它 直 接 放 到 页 面 中 ， 就 像 是 我 们 在 

















Hello, world! 

















。 结 果 如 图 2-2 rz, 








种 方式 更 好 





口 有 了 时候 使 

















图 2-2 将 JavaScript 转 移 到 外 部 文件 中 的 结 
果 看 起 来 与 前 一 个 示例 一 样 ， 但 这 


O 支持 外 部 JavaScript 文件 的 浏览 器 包括 : 微软 的 IE 4 及 更 高 版 本 、Netscape 3 及 更 高 版 本 ， 以 
及 此 后 发 布 的 几乎 所 有 浏览 器 ， 包 括 Firefox, Safari 和 Chrome 等 现代 浏览 




















外 部 JavaScript 文件 这 种 方式 来 对 用 户 隐藏 JavaScript. 但 是 , Ang 





] 户 的 技术 经 验 





很 丰富 ， 有 能 力 检查 他 们 的 浏览 器 缓存 文件 〈 浏览 器 已 经 看 到 的 所 有 东西 都 存储 在 那里 )， 那 
么 这 种 方法 是 无 效 的 。 


O 在 脚本 2-1 ( 以 及 本 书 的 先前 版 本 ) 
在 后 续 版 本 中 ,我 们 主要 使 























1， 我 们 使 用 document.write() 将 信息 插入 HTML Ji rf 

















用 设置 innerHTML 的 方法 ,因为 它 更 通用 。 

















属性 ， 因 为 W3C 已 经 废弃 了 它 。 但 是 ， 即 使 是 这 些 心 存疑 虑 的 人 也 得 承认 ， 


以 路 浏览 器 工作 的 方法 ， 所 以 我 们 在 本 书 中 主要 和 采 














上 添加 或 修改 信息 的 “正式 ”方法 。 

















o 








些 人 反对 使 用 innerHTML 


它 是 最 简单 的 可 


用 这 种 方法 。 第 10 章 将 介绍 在 HTML 页 面 


C) 如 果 你 以 前 见 过 函数 ， 那 么 可 能 会 认为 步骤 2 中 的 writeMessage 引用 应 该 是 writeMessage()。 





这 种 想法 是 不 对 的 , 因为 这 是 两 种 不 同 的 东西 : 市 圆 括 号 的 函数 名 意味 着 J 
果 没 有 圆 括号 ( 就 像 这 里 的 情况 )， 就 是 将 它 赋 值 给 事件 处 理 程序 , 以便 在 此 事件 发 生 时 运行 它 。 









































2.4 在 脚本 中 添加 注释 


养 成 在 脚本 中 添加 注释 的 习惯 是 一 种 很 好 的 做 法 。JavaScript 不 会 将 插入 的 注释 
尽管 在 编写 脚本 时 ， ff 
HR. 注释 有 助 于 解释 你 为 什么 按照 革 种 方式 解决 问题 。 对 脚本 进行 注释 的 另 一 个 原因 是 ， 别 人 可 能 希 

















E 在 调用 这 个 函数 ; 如 








REN IAAT 

















它 可 能 看 起 来 非常 清晰 , (EUR HP 


了 看 这 个 脚本 ， 高 








i 可 能 觉得 它 很 











望 重用 和 修改 你 的 脚本 ,注释 对 他 们 也 有 帮助 。 
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用 于 比较 长 的 多 行 注 释 ， 第 二 种 显示 如 何 编写 单行 





脚本 2-4 给 出 了 两 种 脚本 注释 的 示例 。 第 一 种 
注释 。 
脚本 2-4 


/* 
This is an example of a long JavaScript comment. Note the characters at the beginning and ending of the comment. 


这 里 的 代码 演示 如 何 给 脚本 添加 注释 ， 注 释 有 助 于 开发 者 和 其 他 开发 人 员 理 解 代 码 


This script adds the words "Hello,world!" into the body area of the HTML page. 
*/ 


window.onload = writeMessage; // Do this when page finishes loading 


function writeMessage() { 
// Here's where the actual work gets done 


document. getElementById("helloMessage").innerHTML = "Hello, world!"; 





} 

注意 ， 我 们 没有 给 出 这 个 示例 的 HTML, ， 因 为 它 与 脚本 2-2 是 相同 的 。 从 现在 开始 ， 如 果 HTML 
与 前 一 个 示例 相 比 没有 变化 ， 我 们 就 不 再 重复 显示 它 了 。 

p^ 对 脚本 进行 注释 


1. /* 
This is an example of a long JavaScript comment. Note the characters at the beginning and 








vending of the comment. 
This script adds the words "Hello, world!" into the body area of the HTML page. 
对 于 多 行 的 注释 ， 行 开头 的 /* 让 JavaScript 忽略 此 后 的 所 有 内 容 ， 直 到 注释 的 末尾 为 止 。 


2. 4+/ 
这 是 注释 的 末尾 。 
3. window.onload = writeMessage; 
// Do this when page finishes loading 
function writeMessage() { 
// Here's where the actual work gets done 
document.getElementById("helloMessage").innerHTML = "Hello, world!"; 








} 
这 里 是 与 前 一 个 示例 一 样 的 有 
跟 在 代码 行 后 面 。 在 单行 注释 后 面 ， 同 一 行 上 不 能 再 编写 代码 了 ; 
是 的 ， 我 们 也 厌倦 了 “Hello, world!” 示 例 ， 但 这 是 传统 ， 所 有 编 
现在 就 来 看 点 儿 新 鲜 的 东西 吧 ! 


25 ”向 用 户 发 出 警告 
JavaScript 的 主要 用 途 之 一 是 向 浏览 站 点 的 人 提供 反馈 。 可 以 创建 一 个 弹出 的 警告 窗 
提供 关于 页 面 必须 了 解 的 重要 信息 。 


却 本 ， 但 是 加 上 了 单行 的 注释 。 单 行 注释 可 以 单独 占据 一 行 ， 也 可 以 
行 注 释 不 能 与 代码 同 在 一 行 上 。 
程 图 书 都 以 这 个 示例 开始 讲解 。 
























































口 ， 向 用 户 
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在 用 户 界 面 设 计 中 , 简单 就 是 好 。 例如, 你 可 以 用 一 大 片 警告 文本 和 巨大 的 动画 引起 用 户 的 注意 ， 
但 是 这 就 有 点 儿 物 极 必 反 了 。 相 反 ， 应 该 像 脚本 2-5 (HIML， 它 仅仅 调用 外 部 脚本 ) 和 脚本 2-6 
(JavaScript) 这 样 ， 创 建 一 个 漂亮 、 简 洁 的 警告 窗口 。 现 在 ， 你 知道 我 们 为 什么 是 技术 作家 而 不 是 设 EE 
TART. 


脚本 2-5 ”这 个 示例 的 HTML 包含 cscript> 和 <noscript> 标 签 


<!DOCTYPE html» 
<html> 
<head> 
<title>My JavaScript page</title> 
<script src="script04.js"></script> 
</head> 
<body> 
<noscript> 
«h2»This page requires JavaScript.</h2> 
</noscript> 
</body> 
</html> 


脚本 2-6 警告 对 话 框 帮助 你 与 用 户 进行 通信 

alert("Welcome to my JavaScript page!"); 

口 alert("Welcome to my JavaScript page!"); 

是 的 ， 这 就 是 所 需 的 所 有 代码 ， 其 效果 如 图 2-3 所 示 。 把 希望 显示 的 文本 放 在 alert() 方 法 的 直 
引号 中 就 行 了 。 
























































x from webpage =) 
Welcome to my JavaScript page! " http:/ /www.javascriptworld.com 
], Welcome to my JavaScript page! 的 | 
OK [oi € OK ) 
图 2-3 ”这 个 脚本 只 弹出 一 个 对 话 框 。 显 示 的 3 个 示例 从 上 到 下 依次 是 在 


Firefox 26、 微 软 下 11 和 0OSX 上 的 Safari 6 中 的 对 话 框 的 外 观 


v 提示 

O 在 大 多 数 JavaScript 警告 框 中 ,会 有 某 种 迹象 ， 让 用 户 知道 这 个 警告 框 是 由 JavaScript 命令 弹 
出 的 。 这 是 一 个 安全 特性 ， 用 来 防止 恶意 的 脚本 编写 者 欺骗 用 户 。 无 法 用 代码 控制 这 个 特性 。 
例如 ,在 Safari 上 ， 它 显示 打开 这 个 警告 的 站 点 的 URL， 如 图 2-3 所 示 。Windows 和 Mac 上 
的 Chrome 采用 同样 的 做 法 。 在 正 中， 窗口 标题 总 是 “Message from webpage”. Firefox 则 不 
显示 信息 ， 和 警告 框 直接 覆盖 在 窗口 顶部 ， 并 弹出 警告 信息 。 

O 这 里 还 使 用 了 <noscript> 标 签 。 在 不 支持 的 浏览 器 (老式 浏览 妖 和 关闭 了 JavaScript 
功能 的 浏览 器 ) 上 ,会 显示 一 条 消息 ， 它 指出 这 个 页 面 需要 JavaScript. 
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2.6 ”确认 用 户 的 选择 


向 用 户 提供 信息 是 有 用 的 ， 但 有 时 候 还 希望 从 用 户 那 里 获得 信息 。 脚 本 2-7 演示 如 何 查 明 用 户 对 
你 的 问题 的 回答 。 这 个 脚本 还 引入 了 条 件 〈conditional ) 的 概念 ， 在 这 里 脚本 进行 一 次 测试 ， 并 根据 
测试 的 结果 执行 不 同 的 操作 。 


脚本 2-7 可 以 根据 用 户 对 提示 的 反应 给 出 相应 的 回复 


if (confirm("Are you sure you want to do that?")) { 
alert("You said yes"); 

} 

else { 
alert("You said no"); 
































于 条 件 的 更 多 信息 


条 件 语句 分 成 3 部 分 : if 部 分 (在 这 里 执行 测试 then 部 分 ( 在 这 里 放置 在 结果 为 true 时 要 执 
行 的 脚本 命令 ) 和 可 选 的 else 部 分 (这 里 包含 在 测试 结果 不 为 true 时 要 执行 的 脚本 命令 )。 在 if 部 
分 中 ,我 们 要 测试 的 内 容 放 在 圆 括号 中 ， 其 他 两 部 分 的 内 容 分 别 包 含 在 花 括 号 中 。 


> 确认 用 户 的 选择 

1. if (confirm("Are you sure you want to do that?")) { 

confirm() 方 法 有 一 个 参数 ( 向 用 户 询问 的 问题 ), 并 根据 用 户 的 响应 返回 true 或 false， 如 图 2-4 
所 示 。 



































看 [- i8 
Message from webpage (2sm Message from webp... =S Message from webp... = 





o Are you sure you want to do that? i & You said yes i \ You said no 





图 2-4 可 以 看 到 ， 你 可 以 获得 用 户 操作 的 结果 ， 并 在 警告 框 中 确认 此 结果 。 最 上 面 的 
图 向 用 户 提出 一 个 问题 ， 单 击 OK 或 Cancel 按钮 的 结果 显示 在 下 面 


















































2. alert("You said yes"); 

如 果 用 户 单 击 OK 按钮 ， 那 么 confirm() 返 回 true， 因 此 出 现 的 警告 框 中 显示 “You said yes”. WT 
以 看 到 ， 这 是 代码 的 then 部 分 ， 尽 管 JavaScript 中 并 没有 then 操作 符 。 花 括号 就 标 出 了 then 部 分 的 
范围 。 








3.} 
这 个 花 括 号 结束 当 confirm() 返 回 true 值 时 执行 的 代码 。 
4.else { 





这 里 开始 仅 当 用 户 单 击 Cancel 按钮 时 执行 的 代码 部 分 。 
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5. alert("You said no"); 
如 果 用 户 单 击 Cancel 按钮 ， 那 么 confirm() 返 回 false， 并 显示 消息 “You said no”. 











6. } 
这 个 花 括 号 结束 整个 if/else 条 件 语句 。 
v 提示 


口 可 以 在 then 和 else 部 分 的 花 括 号 中 放任 意 数 量 的 语句 。 


不 存在 唯一 正确 的 方式 
编写 任何 脚本 都 有 许多 种 方式 ， 并 且 都 能 实现 同样 的 效果 。 例如， 当 ( 且 仅 当 ) 代码 块 中 只 有 
一 条 语句 时 ， 条 件 语句 中 就 不 需要 使 用 花 括 号 。 
另外 ， 还 有 一 种 可 以 替代 条 件 语句 的 方法 ， 其 形式 如 下 : 
(condition) ? truePart : falsePart; 
这 相当 于 
if (condition) { 


truePart; 


} 

else { 
falsePart; 

j 


同样 的 简写 方法 也 可 以 用 来 设置 变量 ， 例 如 : 

myNewVariable = (condition) ? trueValue : falseValue; 
这 相当 于 

if (condition) { 


myNewVariable = trueValue; 


} 
else { 
myNewVariable = falseValue; 


} 

HRER LACIE S HEAT ERAT A, true 和 false 代码 块 的 缩 进 也 不 是 必需 的 。 这 些 都 是 
样式 问题 ， 对 于 你 最 合适 的 样式 就 是 正确 的 样式 。 

在 本 书 中 的 大 多 数 地 方 ， 为 了 保持 代码 清晰 ， 我 们 在 示例 中 包含 花 括 号 ， 而 且 选 用 比较 长 的 条 
件 语句 形式 。 


2.7 提示 用 户 
有 时 候 , 不 是 仅 希 望 用 户 回答 Yes/No， 而 是 希望 得 到 更 特定 的 啊 应 。 在 这 种 情况 下 ， 可 以 像 脚本 
2-8 那样 问 一 个 问题 ( 带 默认 回答 )， 然 后 接收 回复 。 图 2-5 显示 其 结果 。 


脚本 2-8 可 以 使 用 对 话 框 询问 用 户 并 处 理 回复 


var ans = prompt("Are you sure you want to do that?",""); 
if (ans) { 
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alert("You said " + ans); 


} 
else { 
alert("You refused to answer"); 





Are you sure you want to do that? You said You bet | do, pal 
, : Prevent this page from creating 
You bet I do, pal additional dialogs 
| Cancel OK OK | 
































图 2-5 可 以 提示 用 户 输入 一 个 文本 字符 串 ， 然 后 对 这 个 字符 串 进行 操作 





> 提示 用 户 作出 响应 








1. var ans = prompt("Are you sure you want to do that?",""); 
这 里 声明 了 一 个 变量 ( 在 第 1 章 中 讨论 过 )。 我 们 使 用 var 关键 字 声明 变量 。 














在 这 个 示例 中 ， 变 


量 称 为 ans， 它 被 赋值 为 prompt() 的 结果 ， 也 就 是 用 户 在 提示 对 话 框 中 输入 的 文本 。 


传递 给 prompt() 方 法 的 是 由 逗号 分 隔 的 两 段 信息 ( 正式 的 术语 是 参数 ); 向 用 





户 询问 的 问题 和 默 





认 回 答 。 这 个 方法 返回 用 户 的 响应 或 null。 当 用 户 单 击 Cancel 按钮 ， 或 当 没 有 默认 回答 而 用 户 单 击 了 
OK 按钮 ， 再 或 当 用 户 清除 了 默认 回答 并 单 击 了 OK 按钮 时 ， 就 会 出 现 null。 有 些 浏 览 器 会 在 提示 对 


























话 框 上 显示 一 个 关闭 控件 ， 使 用 这 个 控件 也 会 返回 null 结果 。 
2.if (ans) { 
alert("You said " + ans); 


} 




















这 个 条 件 语句 使 用 了 刚才 设置 的 变量 。 如 果 ans 存在 (也 就 是 说 ， 用 户 输入 了 响应 )， 那 么 会 弹 
出 一 个 警告 对 话 框 ， 其 中 显示 "You said " 请 注意 这 个 文本 字符 串 末尾 的 额外 空格 ) 和 ans 值 的 拼接 。 




















3.else { 
alert("You refused to answer"); 


} 
































如 果 ans 是 null (因为 用 户 没 有 在 提示 对 话 框 中 输入 任何 内 容 ， 或 者 单 击 了 Cancel 按钮 )， 那 么 





执行 条 件 语句 的 else 块 ， 并 弹出 警告 对 话 框 。 
v 提示 
口 使 用 var 有 如 下 两 种 作用 。 














m 它 让 JavaScript 创建 一 个 变量 〈 也 就 是 在 内 存 中 为 这 个 新 对 象 留 出 一 些 空间 )。 

m 它 定 义 变量 的 作用 域 ( scope )， 也 就 是 JavaScript 在 哪些 地 方 需 要 知道 这 个 对 象 的 内 容 
( 见 下 面 的 补充 内 容 “ 作 用 域 是 什么 ”)。 如 果 变 量 是 在 一 个 函数 中 创建 的 ， 那么 它 是 这 
个 函数 的 局 部 (local) 变量 ， 其 他 函数 不 能 访问 它 。 如 果 它 是 在 任何 函数 之 外 创建 的 ， 
它 就 是 全 局 的 ( global )， 脚本 中 的 所 有 代码 都 可 以 访问 它 。 在 这 个 脚本 中 ， 我 们 创建 了 
































ans 全 局 变量 。 
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O 在 某 些 浏览 器 中 ， 如 果 省 略 prompt 的 第 二 个 参数 ( 默认 响应 ) 那么 一 切 正常 。 但 是 在 其 他 浏 
览 器 中 ， 出 现 的 提示 窗口 中 会 显示 默认 值 “undefined”。 解 决 方案 是 总 是 包含 某 个 默认 值 ， 即 
























































使 是 空 字符 串 也 可 以 〈 就 像 脚 本 2-8 中 一 样 )。 2m 
O Chrome 和 Firefox 允许 访问 者 禁止 页 面 创建 其 他 对 话 框 (参见 图 2-5 )。 因 此， 如 果 你 创建 的 页 
面 依赖 用 户 查 看 对 话 框 ， 那 可 不 好 。 




















作用 域 是 什么 

在 世界 上 的 大 多 数 地 方 ， 如 果 提 到 Broadway ( 大 道 ， 或 特 指 百老汇 )， 人 们 都 知道 你 指 的 是 纽 
约 的 一 条 大 街 。 尽 管 这 条 大 街 本 身 在 纽约 ， 但 是 全 世界 的 人 都 知道 你 的 意思 。 可 以 认为 Broadway 
这 个 词 是 全 局 的 。 

但 是 ,如 果 你 在 加 利 福 尼 亚 的 圣 迭 马 ， 当 你 提 及 Broadway I, AWANA Broadway 指 的 是 当 
地 市 区 的 一 条 主要 大 街 。 这 是 一 个 局 部 值 。 在 圣 迭 葡 ， 你 指 的 是 局 部 意义 的 Broadway， 还 是 全 局 
意义 的 Broadway， 这 一 点 并 不 明确 ， 因 此 可 能 导致 混 消 。 

如 果 你 在 圣 迭 久 ,那么 默认 的 是 局 部 意义 ,在 指 全 局 意义 时 ,必须 明确 地 说 “纽约 的 Broadway”. 
在 圣 迭 或 之 外 的 地 方 ， 人 们 首先 会 想到 纽约 的 百老汇 ， 除 非 他 们 本 地 也 有 名 为 Broadway $65 X £r. 

一 条 大 街 的 作用 域 ( 也 就 是 通常 所 说 的 范围 ) 是 一 个 地 区 , 在 这 个 地 区 中 这 条 大 街 是 默认 意义 ; 
也 就 是 说 ， 如 果 没 有 加 上 其 他 修饰 词 ， 那 么 提 到 这 条 大 街 的 名 字 ， 人 们 就 会 自动 地 想到 这 条 大 街 。 
Zik KH) Broadway 的 作用 域 是 局 部 的 ， 即 圣 和 迭 苞 市 内 和 附近 的 郊区 。 纽 约 的 Broadway 的 作用 域 是 
全 局 的 ， 即 世界 上 任何 地 方 的 人 都 知道 你 指 的 是 什么 地 方 。 

在 JavaScript 代码 中 ， 要 想 避 免 与 变量 作用 域 有 关 的 问题 和 混淆 ， 最 容易 的 方法 是 避免 使 用 同 
名 的 两 个 变量 在 不 同 的 地 方 做 不 同 的 事 。 如 果 必 须 使 用 同名 的 变量 ， 就 一 定 要 弄 清 交 量 的 作用 域 | 
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可 以 根据 用 户 是 否 打 开 了 JavaScript 功能 , 无 颖 地 ou oa 
对 用 户 进行 重 定向 (redirection ), 也 就 是 将 用 户 转 到 另 EHE m 
一 个 页 面 。 这 个 示例 演示 如 何 将 重 定 向 功能 能 入 链接 IE 
中 。 我 们 将 使 用 两 个 HTML 页 面 和 一 个 JavaScript 文 
件 。 第 一 个 HIML 页 面 ( 见 脚本 2-9 ) 向 用 户 显 示 链 接 。 
脚本 2-10 是 JavaScript 文件 ， 脚 本 2-11 是 在 用 户 启 用 
了 JavaScript 功能 的 情况 下 用 户 被 重 定向 到 的 HTML 
页 面 。 当 用 户 单 击 这 个 链接 ( 见 图 2-6 ) 时 ,根据 他 们 
是 否 打开 了 JavaScript 功能 ， 将 被 带 到 两 个 页 面 之 一 。 图 2-6 这 个 页 面 上 的 链接 包含 重 定向 代码 






















































































脚本 2-9 这 个 HTML 页 面 基 于 链接 对 用 户 进行 重 定向 


<!DOCTYPE html> 
<html> 
<head> 
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«title»Welcome to our site</title> 
<script src-"script07.js"»«/script» 
</head> 


<a href="scripto4.html" id="redirect"> Welcome to our site... c'mon in!</a> 
</h2> 
</body> 
</html> 


ES 


脚本 2-10 ”通过 将 重 定向 功能 能 入 在 代码 中 ， 用 户 甚至 不 知道 你 的 脚本 干预 了 链接 的 行 
window.onload = initAll; 


function initAll() ( 
document.getElementById("redirect").onclick = initRedirect; 
} 


function initRedirect() { 
window. location = "jswelcome.html"; 
return false; 


} 
脚本 2-11 这 是 启用 了 JavaScript 功能 的 用 户 将 看 到 的 HTML 页 面 


<!DOCTYPE html» 
<html> 
<head> 
<title>Our site</title> 
</head> 


<body> 
«hi»Welcome to our web site, which features lots of cutting-edge JavaScript«/hi» 


«/body» 
«/html» 


> 对 用 户 进行 重 定向 

1. <a href="scripto4.html" id="redirect">Welcome to our site... c'mon in!«/a» 

在 脚本 2-9 中 ， 这 是 用 户 单 击 的 链接 。 如 果 用 户 没 有 启用 JavaScript 功能 并 单 击 链 接 ， 那 么 他 们 
会 按照 通常 的 href 路 径 前 进 , 到 达 如 图 2-7 所 示 的 页 面 。 如 果 用 户 启 用 了 JavaScript 功能 并 单 击 链接 ， 
那么 脚本 〈 见 步骤 4 ) 就 会 发 挥 作用 并 加 载 一 个 新 页 面 。 


eo 2 https.//cidropbox.. JO ~ @ C | GB My JavaScript page 


This page requires JavaScript. 





















































个 消息 向 用 户 说 明 情况 














m 





图 2-7 如 果 你 认为 JavaScript 是 站 点 的 必要 部 分 ， 就 用 
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2. window.onload = initAll; 
这 行 代码 在 脚本 2-10 中 。 当 完成 页 面 加 载 时 ， 它 会 触发 initAll() PRK. 
3. function initAll() { 
document .getElementById("redirect").onclick = initRedirect; 
} 
这 个 函数 告诉 id 为 redirect 的 元 素 ( 也 就 是 步骤 1 中 的 链接 ), 在 它 被 单 击 时 应 该 调用 initRedirect() 
4. function initRedirect() { 
window. location = "jswelcome.html"; 





return false; 
} 
如 果 调 用 这 个 函数 , EE window. location( BIR Va as FP Aib zs B1) 0418]. ) 设 置 为 一 个 新 页 面 。 return 
false 表示 停止 对 用 户 单 击 的 处 理 ， 这 样 就 不 会 加 载 hre 指向 的 页 面 。 
这 种 方式 最 酷 的 特色 是 , 我 们 完成 了 重 定向 而 用 户 根本 不 会 意识 到 发 生 了 重 定向 。 他 们 仅仅 是 根据 自 
己 的 情况 到 达 了 两 个 页 面 之 一 。 如 果 他 们 启用 了 JavaScript 功能 ， 就 会 到 达 图 2-8 所 示 的 页 面 。 


o © https.//cidropbox.. D ~ BO y site 


Welcome to our web site, which features 
lots of cutting-edge JavaScript 



























































| © (mon) 








图 2-8 ”支持 JavaScript 功能 的 浏览 器 会 显示 这 个 页 面 





v 提示 

OQ 初 看 上 去 , 似乎 可 以 只 在 全 局 范围 设置 onclick 处 理 程序 , 即 在 加 载 页 面 时 , 但 是 不 能 这 么 做 。 
浏览 器 有 可 能 还 没有 遇 到 id 为 redirect 的 元 素 ， 尤 其 是 对 于 复杂 的 大 页 面 ， 在 这 种 情况 下 ， 
JavaScript 就 不 能 设置 onclick 处 理 程序 。 所以, 我 们 必须 等 待 页 面 完成 加 载 , 这 要 通过 onload 
实现 。 

口 请 记 住 ,一些 用 户 习 惯 在 鼠标 位 于 链接 上 时 看 到 链接 指向 的 页 面 ,不 喜欢 被 自动 转 到 其 他 页 面 。 


2.9 使 用 JavaScript 改进 链接 


有 时 候 ， 在 用 户 单 击 链 接 之 后 ,但 在 浏 mn 希望 执行 某 种 操作 。 典 型 的 

示例 是 ,在 用 户 进 入 站 点 上 的 特定 页 面 之 前 发 出 警告 ， 或 者 在 用 户 离开 站 点 时 给 出 明确 的 提示 。 在 这 

个 示例 中 , 我 们 将 弹出 一 个 警告 对 话 框 ， 然后 再 转 到 最 终 的 目的 地 。 脚本 2-12 显示 HTML, 脚本 2-13 
显示 需要 对 前 面 的 脚本 做 的 少量 修改 。 
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脚本 2-12 与 平常 一 样 ，HTML 在 链接 标签 中 包含 JavaScript 可 以 使 用 的 id 


<!DOCTYPE html» 
<html> 
<head> 
«title»Welcome to our site</title> 
<script src="script08.js"></script> 
</head> 
<body> 


<h2> 
Hey, check out «a href="http://www.pixel.mu" id="redirect"> my cat's Web site</a>. 


</h2> 
</body> 
</html> 


脚本 2-13 ”链接 改进 脚本 


window.onload = initAll; 


function initAll() { 
document.getElementById("redirect").onclick = initRedirect; 
} 


function initRedirect() { 
alert("We are not responsible for the content of pages outside our site"); 


window. location = this; 
return false; 


} 


1. Hey, check out «a href="http://www.pixel.mu" id="redirect">my cat's Web site</a>. 

脚本 2-12 中 的 这 行 代码 显示 链接 , 其 中 包括 链接 目的 地 的 href 和 链接 的 id, 脚本 2-13 将 使 用 
^r id。 页 面 见 图 2-9. 

2.alert("We are not responsible for the content of pages outside our site"); 

在 单 击 链接 之 后 ， 会 显示 这 个 警告 ， 如 图 2-10 所 示 。 
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Hey, check out my cat's Web site. 





Message from webpage 





i We are not responsible for th» content of pages outside our site 


— — 
































图 2-9 单 击 这 个 链接 就 会 把 用 户 重 定 向 到 猫 的 Ed 2-10 ”如 果 用 户 使 用 支持 JavaScript 的 浏览 
Web 站 点 那么 会 在 离开 站 点 时 看 到 这 个 警告 消息 
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3. window. location = this; 

这 一 行将 浏览 带 窗 口 设置 为 关键 字 this 指定 的 位 置 , this 包含 这 个 链接 。 目前 , 只 需 将 this 
看 作 一 个 容器 ， 本 书后 面 会 详细 介绍 它 。 如 果 你 现在 就 想 知 道 更 多 的 信息 ， 那 么 可 以 阅读 后 面 的 
补充 内 容 “this 是 什么 ”。 当 用 户 到 达 最 终 目 的 地 时 ， 页 面 像 图 2-11 EE ( 至 少 ， 使 用 猫 的 网 页 
作为 目的 地 )。 




















€ — Qf wowpixel.mu 户 三 


My name is Pixel. I'm a cat. 
This is my page. 





wale shreds 








图 2-11 在 这 个 示例 中 ， 这 只 猫 的 页 面 实际 上 是 由 我 们 维护 的 
( 你 不 会 认为 它 自己 会 编写 页 面 吧 ) 





























this 是 什么 
在 这 个 示例 中 使 用 了 this， 但 是 this 究竟 是 什么 还 不 很 清楚 。 
JavaScript 关键 字 this 使 脚本 能 够 根据 使 用 这 个 关键 字 的 上 下 文 将 值 传 递 给 函数 。 在 这 个 示例 
P, this 是 在 一 个 由 标签 的 事件 触发 的 函数 中 使 用 的 ， 所 以 this 是 一 个 链接 对 象 。 在 后 面 的 示例 
中 ， 将 看 到 在 其 他 地 方 使 用 this， 你 应 该 能 够 根据 使 用 它 的 上 下 文 判 断 出 this 是 什么 。 


v 提示 

口 你 可 能 会 注意 到 ， 代 码 中 并 没有 引用 特定 的 网 页 一 一 这 是 this 关键 字 的 作用 之 一 。this 蔡 我 们 
完成 的 工作 之 一 是 从 HTML 链接 获得 URL ( 也 就 是 a 标签 的 href 属性 值 )。 由 于 采用 了 这 种 方 
式 ， 如 果 以 后 将 脚本 2-12 改 为 指向 其 他 页 面 而 不 是 猫 页 面 ， 就 不 必修 改 脚 本 2-13。 实 际 上 ， 可 
以 让 Web 站 点 上 的 所 有 链接 都 调用 这 个 相同 的 脚本 ， 这 一 行 代码 都 会 自动 获得 相应 的 href 值 。 

O 如 果 前 面 的 提示 解释 得 还 不 够 ， 可 以 这 样 考虑 : 按照 这 种 方式 ， 可 以 使 用 WYSIWYG 编辑 器 
修改 你 的 HTML 页 面 ,而 且 修改 者 可 以 完全 不 了 解 JavaScript。 只 要 他 们 只 是 修改 HTML 页 面 ， 
就 不 会 破坏 你 的 脚本 。 

O 这 对 你 来 说 还 不 够 吗 ? 还 有 一 个 好 处 : 如 果 用 户 的 浏览 器 不 理解 JavaScript， 那 么 它 只 会 加 载 
HTML 页 面 ， 而 不 显示 警告 。 当 他 们 单 击 链接 时 ,会 像 一 般 情 况 下 那样 加 载 页 面 : 不 会 发 生 错 
误 ， 也 不 会 提示 “你 必须 换 用 其 他 浏览 器 " ， 没 有 任何 问题 。 

D 这 种 编程 方式 称 为 无 干扰 脚本 编程 ( unobtrusive scripting )， 它 将 代码 与 HTML 分隔 开 ， 从 而 使 
这 两 者 都 更 加 灵活 。 如 果 想 了 解 关 于 Web 编程 的 更 多 术语 , 请 阅读 后 面 的 补充 内 容 “ 常 见 术 语 ”。 
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常见 术语 
使 用 JavaScript 一 段 时 间 后 ， 你 可 能 被 不 断 增加 的 术语 弄 得 头 看 ， 其 中 许多 术语 在 根本 上 是 关 
于 JavaScript 是 什么 以 及 不 是 什么 的 。 下 面 快速 总 结 一 下 术语 问题 ,帮助 你 洪 清 概念 。( 如 果 你 不 觉 
得 这 是 个 迫切 的 问题 ， 那 么 和 一 些 脚 本 开发 人 员 聊 一 会 儿 吧 ! ) 
口 JavaScript。 尽 管 正 式 地 说 这 个 术语 是 属于 AOL 的 (AOL 收购 Netscape )， 但 是 它 常常 用 作 所 
有 与 JavaScript 类 似 的 脚本 技术 ， 比 如 微软 的 JScript。 我 们 在 本 书 中 也 沿用 这 种 做 法 ”。 
口 DHTML。 即 Dynamic HTML (动态 HTML ) ,但 是 在 现实 中 ， 它 的 实际 意义 取决 于 说 话 的 人 。 


Web 标准 项 目 将 DHTML 定义 为 :“…… 一 种 过 时 的 脚本 技术 , 它 的 主要 特征 是 它 会 改变 某 些 
元 素 的 样式 属性 ， 以 及 使 用 浏览 器 特定 的 DOM document.layers 和 document.all” #453 7s 
术语 我 们 已 不 再 使 用 了 。 


O DOM 脚本 编程 (DOM scripting ) 。 一 种 使 用 JavaScript 编写 网 页 的 方式 ， 按 照 这 种 方式 ， 
代码 只 通过 操纵 W3C DOM 来 修改 页 面 ( 也 就 是 说 ,不 使 用 专 有 的 、 非 标准 或 已 废弃 的 属性 )。 
脚本 2-10 和 脚本 2-13 引用 document.getElementById("redirect").onclick, 这 就 是 DOM 脚 
本 编程 的 做 法 。 
口 无 干扰 脚本 编程 ( unobtrusive scripting) 。 一 种 使 用 JavaScript 编写 网 页 的 方式 ， 按 照 这 种 
方式 ， 网 页 的 行为 和 它 的 内 容 是 分 隔 开 的 一 一 也 就 是 说 ，HTML 在 一 个 文件 中 ，JavaScript 
在 另 一 个 文件 中 。 这 是 一 种 最 佳 实践 ， 它 的 作用 就 像 是 对 HTML 和 CSS 进行 分 隔 ， 即 页 面 
BELA A (08S) E PHT, WA CHIML) EA 
口 渐进 增强 。“ 无 干扰 编程 ”的 一 种 附加 功能 。 如 果 代 码 编写 好 之 后 , 没有 JavaScript 支持 (或 
使 用 功能 比较 差 的 浏览 器 ) 的 访问 者 也 能 够 使 用 站 点 的 所 有 功能 ， 只 是 用 户 体验 稍 差 ， 这 就 叫 
渐进 增强 。 脚 本 2-10 和 脚本 2-13 也 是 渐进 增强 的 例子 。 在 这 些 示例 中 ， 没 有 JavaScript 支持 的 
访问 者 也 可 以 单 击 链接 ， 但 是 如 果 有 JavaScript 支持 ， 用 户 体验 会 更 丰富 。 
在 本 书 中 ,我 们 要 使 用 许多 种 脚本 技术 。 尽 管 我 们 建议 采用 无 干扰 脚本 编程 /渐进 增强 方式 ( 而 
且 尽 可 能 演示 这 种 做 法 )， 但 是 我 们 也 知道 你 ( 作为 刚 入 门 的 脚本 开发 人 员 ) 主要 需要 理解 和 支持 
比较 老式 但 容易 编写 的 代码 。 在 真实 环境 中 ,我 们 也 知道 最 直接 的 方式 往往 就 是 最 简单 的 方式 。 所 
以 我 们 在 脚本 2-3 中 使 用 了 innerHTML， 尽 管 它 不 属于 W3C DOM. 


2.10 ”使 用 多 级 条 件 


有 时 候 ， 在 一 个 条 件 测试 中 需要 两 个 以 上 的 选择 ， 仅 then 和 else ZAMAN. RFA WK if 
语句 ,但 更 简单 的 方法 常常 是 使 用 switch/case 语句 。switch/case 构造 允许 针对 多 个 值 检查 一 个 变 
Æo 如 图 2-12 所 示 , 这 个 脚本 根据 用 户 单 击 的 按钮 , 在 警告 对 话 框 中 返回 3 段 不 同 的 总 统 语录 之 一 。 
脚本 2-14 是 HTML， 这 相当 简单 。 脚 本 2-15 是 JavaScript， 它 使 用 switch/case 构造 区 分 不 同 的 总 
统 语录 。 



































D MEREM, JavaScript ECMAScript 语言 标准 的 实现 。Adobe 的 ActionScript 是 该 标准 的 另 一 种 实现 。 





编者 注 
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图 2-12 在 最 上 面 的 窗口 中 ， 调 用 3 个 按钮 的 函数 会 产生 下 面 3 个 对 话 框 所 示 的 3 种 不 同 响应 
































脚本 2-14 这 段 HTML 建立 多 级 条 件 的 页 面 


<!DOCTYPE html> 
<html> 
<head> 
<title>Switch/Case handling</title> 
<script src="scripto9.js"></script> 
</head> 
<body> 
<h2>Famous Presidential Quotes</h2> 
<form action="#"> 
<input type-"button" id="Lincoln" value="Lincoln"> 
<input type="button" id="Kennedy" value="Kennedy"> 
<input type-"button" id-"Nixon" value="Nixon"> 
</form> 
</body> 
</html> 


脚本 2-15 ”这 种 条 件 语句 允许 针对 多 种 可 能 性 进行 检查 
window.onload = initAll; 


function initAll() ( 


document.getElementById("Lincoln").onclick = saySomething; 
document.getElementById("Kennedy").onclick - saySomething; 
document.getElementById("Nixon").onclick = saySomething; 


} 


function saySomething() { 





30 第 2 章 开始 





switch(this.id) { 

case "Lincoln": 
alert("Four score and seven years ago..."); 
break; 

case "Kennedy": 
alert("Ask not what your country can do for you..."); 
break; 

case "Nixon": 
alert("I am not a crook!"); 
break; 

default: 


} 
} 


=> 使 用 switch/case 语句 


1. window.onload = initAll; 

当 加 载 页 面 时 ， 调 用 initAll()PA ZA. 

2. function initAll() ( 

document.getElementById("Lincoln").onclick = saySomething; 
document .getElementById("Kennedy").onclick = saySomething; 
document.getElementById("Nixon").onclick = saySomething; 

在 这 个 函数 中 ， 我 们 为 页 面 上 的 每 个 按钮 设置 了 onclick 处 理 程序 。 因 为 在 HTML 中 设置 了 id 
属性 和 value 属性 ， 所 以 可 以 使 用 getElementById() 设 置 事件 处 理 程序 。 如 果 有 value 属性 ， 就 可 以 
使 用 getElementByValue() 调 用 ， 那么 就 不 必 设 置 id 属性 。 

3. function saySomething() { 

这 一 行 开 始 saySomething() PAA. 

4. switch(this.id) { 

this 对 象 的 id 用 作 switch() 的 参数 。 这 个 值 将 决定 执行 以 下 case 语句 中 的 哪 一 个 。 

5.case "Lincoln": 

alert("Four score and seven years ago..."); 















































break; 
如 果 this 对 象 的 id 是 Lincoln， 那 么 显示 这 个 警告 消息 。 如 果 用 户 单 击 Lincoln， 就 会 进入 这 里 
的 代码 。 但 是 , 在 这 里 已 经 执行 了 我 们 需要 的 操作 ， 所 以 我 们 希望 离开 这 个 switch 语句 ,为 此 , 需要 
使 用 break 语句 。 如 果 没 有 break， 就 会 继续 执行 下 面 的 所 有 代码 。 尽 管 在 某 些 情况 下 继续 执行 下 面 
的 分 支 是 我 们 需要 的 效果 ， 但 是 在 这 个 示例 中 不 应 该 这 么 做 。 
6. case "Kennedy": 
alert("Ask not what your country can do for you..."); 















































break; 
如 果 用 户 单 击 Kennedy， 就 会 进入 这 个 case W, 
7. case "Nixon": 

alert("I am not a crook!"); 








break; 
最 后 , 如 果 用 户 单 击 Nixon, 就 会 进入 这 里 , 这 里 弹出 男 一 个 警告 对 话 框 , 然后 退出 switch 语句 。 
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8. default: 

如 果 用 户 的 输入 与 上 面 的 条 件 都 不 匹配 , 那么 就 会 执行 这 里 的 代码 。 也 就 是 说 ， 如 果 switch 值 与 
任何 case 值 都 不 匹配 ， 就 会 进入 default 部 分 。default 块 是 可 选 的 ， 但 是 包含 default 块 是 一 种 好 的 
编程 习惯 , 可 以 以 防 万 一 。 在 这 个 脚本 中 ,这 里 没有 要 执行 的 代码 ， 因 为 我 们 应 该 不 可 能 进入 default 
部 分 。 

9. } 

这 个 右 花 括号 结束 switch 语句 。 

v 提示 

O 也 可 以 向 switch 语句 传递 字符 串 之 外 的 其 他 值 。 可 以 在 switch 语句 中 使 用 数字 值 ， 甚 至 对 数 

学 计算 的 结果 进行 评估 。 但 是 , 如 果 结 果 应 该 是 数字 , 那么 要 确保 case 语句 是 匹配 的 
语句 应 该 检查 数字 ， 而 不 是 字符 串 ( 例如 5， 而 不 是 "5" )。 


2.11 处理 错误 


即使 你 有 多 年 使 用 计算 机 的 经 验 , 但 是 你 站 点 的 许多 用 户 很 可 能 没什么 经 验 。 因 此 ， 应 该 向 他 们 
提供 有 意义 的 错误 消息 ， 而 不 是 大 多 数 浏览 器 在 拒绝 用 户 的 操作 时 返回 的 莫名 其 妙 的 消息 。 脚 本 2-16 
演示 如 何 使 用 JavaScript 的 try/throw/catch 命令 产生 友好 、 有 用 的 错误 消息 。 我们 将 这 个 功能 放 在 一 
个 简单 的 平方 根 计算 器 中 。 


脚本 2-16 这 个 脚本 用 JavaScript 适当 地 处 理 错误 


window.onload = initAll; 


























case 





























function initAll() { 
var ans = prompt("Enter a number",""); 
try { 
if (lans || isNaN(ans) || ans<o) { 
throw new Error("Not a valid number"); 


alert("The square root of " + ans + " is " + Math.sqrt(ans)); 


} 
catch (errMsg) { 
alert (errMsg.message) ; 
} 
} 


=> 适当 地 处 理 错误 

l. var ans = prompt("Enter a number", ""); 

这 是 一 个 普通 的 提示 ， 我 们 把 它 存储 在 ans 变量 中 供 以 后 使 用 。 在 这 个 示例 中 ， 我 们 希望 用 户 输 
和 人 一 个 数字 。 如 果 用 户 确实 输入 了 合适 的 数字 ，JavaScript 就 会 显示 所 输入 数字 的 平方 根 。 

2.try { 

但 是 ， 如 果 他 们 没有 输入 数字 ( 如 图 2-13 所 示 )， 那 么 代码 能 够 捕捉 到 这 一 错误 并 显示 有 意义 的 
消息 。 即 使 用 户 在 要 求 他 们 输入 数字 时 输入 了 单词 ， 我 们 也 能 够 有 礼貌 地 发 出 提示 。 首 先 使 用 try fü 
令 。 在 这 块 代码 中 ， 我 们 检查 用 户 的 输入 是 否 有 效 。 
















































































32 第 2 章 开始 








Enter a number 


HELLO THERE! 


Cancel OK | 























图 2-13 ”我 们 要 求 用 户 输入 数字 ， 但 是 用 户 可 能 输入 任何 内 容 ， 比 如 非 数字 项 


3.if (lans || isNaN(ans) || ans«o) { 
throw new Error("Not a valid number"); 
} 

我 们 要 关注 3 种 情况 : 根本 没有 输入 ; 用 户 输入 了 某 些 内 容 ， 但 不 是 数字 ; 输入 的 是 数字 , 但 它 
是 负数 ( 因为 负数 的 平方 根 是 虚数 ， 这 超出 了 这 个 示例 的 范围 )。 如 果 !ans 是 true， 就 意味 着 用 户 没 
有 输入 任何 内 容 。 内 置 的 isNaN() 方 法 检查 传递 给 它 的 参数 是 否 “ 不 是 数字 ”( Not a Number )。 如 果 
isNaN() 返 回 true， 就 说 明 输 入 的 内 容 是 无 效 的 。 如 果 ans 小 于 0， 它 就 是 负数 。 对 于 以 上 任何 情况 ， 
都 希望 抛 出 一 个 错误 ， 指 出 “Not a valid number”( 不 是 有 效 的 数字 )。 当 抛 出 错误 之 后 ，JavaScript 
跳出 try 块 并 寻找 对 应 的 catch 语句 。 因 此 ，try 块 中 其 余 的 代码 都 被 跳 过 。 



































4. alert("The square root of " + ans + " is " + Math.sqrt(ans)); 
如 果 输 入 了 有 效 的 内 容 ， 就 显示 平方 根 ， 如 图 2-14 所 示 。 
5.} 
这 个 右 花 括号 结束 try 块 。 
6. catch (errMsg) { 
alert (errMsg.message) ; 
} 
这 是 出 现 错误 时 要 使 用 的 catch 语句 。error 作为 参数 传递 给 它 , 它 显 示 错 误 的 message 部 分 ( 见 
图 2-15 )。 如 果 没 有 抛 出 错误 ，catch 中 的 代码 就 不 会 执行 。 




































































The square root of 256 is 16 Not a valid number 
Prevent this page from creating additional Prevent this page from creating additional 
dialogs dialogs 
| OK OK 
图 2-14 这 是 输入 有 效 数 字 时 脚本 的 结 2-15 ”如果 输入 了 错误 的 数据 ， 就 告诉 用 户 
v 提示 


O 还 有 一 个 可 选 部 分 : 最 后 的 {} 块 。 这 个 部 分 放 在 catch 后 面 ， 无 论 try 块 是 否 抛 出 错误 ， 这 里 
包含 的 代码 都 应 该 执行 。 
口 下 一 章 会 详细 介绍 Math 对 象 。 
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第 一 个 Web 应 用 程序 








XL 的 作用 有 所 体会 之 后 ， 我 们 来 更 深入 地 探索 JavaScript 语言 。 在 本 章 中 ， 我 们 将 
详细 讨论 JavaScript 的 基本 元 素 并 介绍 JavaScript 语言 的 其 他 方面 ， 比 如 循环 、 数 组 和 函数 
(不 必 担 心 ， 这 里 的 内 容 并 不 难 理解 )。 

你 还 会 学 习 如 何 使 用 JavaScript 编写 网 页 ，JavaScript 如 何 处 理 用 户 所 犯 的 错误 ， 等 等 。 

目前 需要 了 解 的 HTML 知识 见 表 3-1。 



































表 3-1 目前 需要 了 解 的 HTML 知 识 











ho X $m X 
table 在 网 页 上 显示 表格 数据 
tr 在 表格 中 开始 一 行 
th 表格 中 列 的 标题 单元 格 
td 包含 表格 中 的 每 个 单元 格 





3.1 用 循环 进行 重复 操作 


在 编程 中 ， 常 常 需 要 测试 某 一 条 件 ， 并 且 根 据 需要 多 次 重复 执行 测试 。 我 们 用 一 个 例子 来 说 明 : 
在 字 处 理 程序 中 进行 查找 和 替换 。 查 找 一 段 文本 ， 将 它 改 为 另 一 个 文本 字符 串 ， 并 对 文档 中 出 现 第 一 
个 字符 串 的 所 有 地 方 重复 这 个 过 程 。 现 在 ,假设 你 用 一 个 程序 自动 完成 这 个 任务 。 这 个 程序 要 执行 一 
个 循环 (loop )， 从 而 以 指定 的 次 数 重复 一 个 操作 。 在 JavaScript 中 ， 循 环 是 基本 的 编程 特性 。 


关于 循环 的 更 多 知识 


在 本 书 中 ， 我 们 最 常用 的 循环 类 型 是 for 循环 ， 这 种 循环 以 for 命令 开始 。 这 种 循环 使 用 一 个 计 
数 器 ( counter )， 计 数 器 是 一 个 变量 ,， 它 最 初 是 某 个 值 ( 常常 是 零 )。 这 种 循环 在 测试 条 件 得 不 到 满足 
时 就 会 结束 。 

在 循环 结构 开头 的 命令 后 面 是 圆 括 号 。 在 圆 括号 中 常常 有 计数 器 定义 和 递增 计数 器 的 方式 ( 也 就 
是 增加 计数 器 值 的 方式 )。 

在 后 面 几 个 示例 中 ， 我 们 将 构建 一 个 简单 而 且 大 家 熟悉 的 应 用 程序 : Bingo 卡片 游戏 。 我 们 使 用 
每 个 示例 演示 JavaScript 的 不 同方 面 。 先 来 看 一 个 HTML 页 面 ， 如 脚本 3-1 所 示 。 它 包含 的 表格 就 是 
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Bingo 卡片 的 框架 ( 见 图 3-1 )。 看 一 下 这 个 脚本 ， 你 会 发 现 第 一 行 包含 卡片 顶部 的 字母 ， 后 续 的 每 一 
行 包含 5 个 表格 单元 格 。 大 多 数 单元 格 只 包含 一 个 非 中 断 空格 (使 用 HTML 实体 &nbsp; ), 但 是 第 三 
行 包含 一 个 Free 格 , 所 以 这 一 行 中 的 一 个 表格 单元 格 包含 单词 Frees 注意, 每 个 单元 格 都 有 id 属性 ， 
脚本 使 用 这 个 属性 操纵 单元 格 的 内 容 。id 采用 的 形式 是 square0、square1、square2， 直 到 square23, 
采用 这 种 形式 的 原因 在 后 面 解释 。 在 页 面 的 底部 ， 有 一 个 用 来 生成 新 卡片 的 链接 。 


ONO Make Your Own Bingo Card _ = 
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Create A Bingo Card 
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Click here to create a new card 








Done N/A e o 
3-1. 这 个 Bingo 卡片 已 经 随机 生成 了 许多 数字 ， 但 它 还 不 是 有 效 的 Bingo 卡片 


脚本 3-1 这 个 HTML 页 面 建立 Bingo 卡片 的 框架 


<!DOCTYPE html» 
<html> 
<head> 
<title>Make Your Own Bingo Card</title> 
<link rel="stylesheet" href="script01.css"> 
<script src="script01.js"></script> 
</head> 
<body> 
<hi>Create A Bingo Card</h1> 
<table> 
<tr> 
<th>B</th> 
<th>I</th> 
<th>N</th> 
<th>G</th> 
<th>0</th> 
</tr> 
<tr> 
«td id="squareO">&nbsp; </td> 
<td id="square5">&nbsp; </td> 
«td id="square10">&nbsp; </td> 
«td id="square14">&nbsp; </td> 
<td id="square19">&nbsp; </td> 
</tr> 
<tr> 
<td id="square1">&nbsp; </td> 
<td id="square6">&nbsp; </td> 
«td id="square11">&nbsp; </td> 
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<td id="square15">&nbsp; </td> 
«td id="square20">&nbsp; </td> 
</tr> 
«tr» 
«td id="square2">&nbsp; </td> 
<td id="square7">&nbsp; </td> 
<td id="free">Free</td> 
«td id="square16">&nbsp; </td> 
<td id="square21">&nbsp; </td> 
</tr> 
<tr> 
<td id="square3">&nbsp; </td> 
<td id="square8">&nbsp; </td> 
<td id="square12">&nbsp; </td> 
«td id="square17">&nbsp; </td> 
«td id="square22">&nbsp; </td> 
</tr> 
«tr» 
«td id="square4">&nbsp; </td> 
<td id="square9">&nbsp; </td> 
<td id="square13">&nbsp; </td> 
«td id="square18">&nbsp; </td> 
«td id="square23">&nbsp; </td> 
</tr> 
</table> 
<p><a href="scripto1.html" id="reload">Click here</a> to create a new card</p> 
</body> 
</html> 


脚本 3-2 是 我 们 用 来 对 Bingo 卡片 的 内 容 应 用 样式 的 CSS 文件 。 如 果 你 不 了 解 CSS， 也 不 需要 担 
心 ， 因 为 在 这 里 CSS 并 不 重要 。 对 于 其 他 Bingo 卡片 示例 ，HTML 和 CSS 页 面 没 有 变化 ， 所 以 我 们 
只 在 这 里 显示 它们 一 次 。 


脚本 3-2 这 个 CSS 文件 为 Bingo 卡片 添加 样式 


body { 
background-color: white; 
color: black; 
font-size: 20px; 
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; 











} 
h1, th { 
font-family: Georgia, "Times New Roman", Times, serif; 
} 
h1 { 
font-size: 28px; 
} 
table { 
border-collapse: collapse; 
} 
th, td { 


padding: 10px; 

border: 2px #666 solid; 
text-align: center; 
width: 20%; 
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#free, .pickedBG { 
background-color: #f66; 


.WinningBG { 
background-image:url(images/redFlash.gif); 














这 个 示例 演示 如 何 建立 和 使 用 循环 ， 用 随机 生成 的 数字 填充 Bingo 卡片 的 内 容 。 脚 本 3-3 包含 所 
需 的 JavaScript. 这 个 脚本 生成 的 卡片 不 是 有 效 的 Bingo 卡片 , 因为 Bingo 卡片 游戏 对 特定 列 中 的 数字 
有 一 些 限 制 。 后 面 的 示例 将 对 脚本 进行 改进 ， 直 到 产生 有 效 的 Bingo 卡片 。 


脚本 3-3 ”欢迎 你 来 到 第 一 个 JavaScript 循环 


window.onload = initAll; 














function initAll() ( 
for (var i-0; i<24; i++) { 
var newNum = Math.floor(Math.random() * 75) + 1; 


document.getElementById("square" + i).innerHTML = newNum; 


Bingo 卡片 中 的 内 容 

你 肯定 见 过 Bingo 卡片 ， 但 是 可 能 没有 仔细 研究 过 。 美 国 的 Ene 卡片 是 5x5 的 方形 ，5 个 列 
标 着 B-LN-G-O， 格 子 中 包含 1~75 的 数字 。 正 中 间 通 常 是 一 个 空 的 格子 ， 常 常 印 着 单词 free。 
列 可 以 包含 的 数字 的 范围 如 下 : 

口 B 列 包含 数字 1~15; 

口 I 列 包含 数字 16 ~30; 

ON 列 包 含 数字 31~45; 

口 G 列 包含 数字 46 ~ 60; 

口 O 列 包 含 数字 61 ~75。 


> 使 用 循环 创建 表格 内 容 


1. window.onload = initAll; 

这 行 代码 在 脚本 3-3 中 。 当 窗口 完成 加 载 时 , 它 调用 initAl1() 函 数 。 使 用 事件 处 理 程序 调用 函数 
是 常用 的 做 法 。 

2. function initAll() { 

这 一 行 开始 函数 。 

3. for (var i-0; i«24; i++) { 

这 一 行 开始 循环 。 程 序 员 通常 使 用 变量 i 作为 循环 内 部 的 计数 器 变量 。 首先 ,将 设置 为 0。 分 
号 表示 这 个 语句 结束 了 ， 这 使 我 们 能 够 在 同一 行 上 放置 男 一 个 语句 。 下 一 部 分 的 意思 是 ,“ 如 果 ic 
F 24, 那么 执行 花 括 号 中 的 代码 ”。 E cn i 的 值 加 1。 因 为 这 是 第 一 次 用 到 递增 ， 
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我 们 来 解释 一 下 。i++ 部 分 使 用 第 1 章 介 绍 过 的 ++ 操 作 符 将 i 的 值 加 1。 这 个 循环 将 重复 24 次 ， 所 以 
循环 中 的 代码 将 执行 24 次 。 在 第 一 次 迭代 中 ,i 是 0; 在 最 后 一 次 迭代 中 ,i 是 23。 

4. var newNum = Math.floor(Math.random() * 75) + 1; 

在 循环 内 部 ,我 们 创建 一 个 新 的 变量 newNum, 并 将 它 赋值 为 等 号 右边 计算 的 结果 。 内 置 的 JavaScript 
命令 Math.random() 生 成 0~1 的 一 个 随机 数 ， 比 如 0.123456789。 将 Math.random() 与 最 大 值 相 乘 (请 
记 住 ，Bingo 卡片 中 的 值 是 从 1 到 75 ) 会 生成 0 到 最 大 值 之 间 的 结果 。 对 结果 进行 floor 运算 会 获得 
结果 的 整数 部 分 ， 即 0 到 ( 最 大 值 减 1 ) 的 整数 。 再 加 1 就 会 获得 1 到 最 大 值 的 数字 。 

5. document.getElementById("square" + i).innerHTML = newNum; 

在 这 里 ， 我 们 将 刚才 获得 的 随机 数 写 和 表格 中 。 我 们 处 理 的 元 素 的 id 属性 是 square 再 拼接 上 i 
的 当前 值 。 例 如 ， 在 循环 的 第 一 次 迭代 中 ，i 的 值 是 0， 所 以 这 一 行人 处理 id 为 squareo 的 元 素 。 这 一 
行将 squareo 对 象 的 innerHTML 属性 设置 为 newNun 的 当前 值 。 然 后 ， 因 为 我 们 还 在 循环 中 ， 步 又 4 和 
步骤 5 会 重复 执行 ， 直 到 整个 Bingo 卡片 填写 完毕 。 
























































循环 的 组 成 
for 循环 有 3 个 组 成 部 分 ， 如 图 3-2 所 示 。 





i=0; i«userNum; i++ 
初始 化 限制 递增 
图 3-2 循环 的 3 个 组 成 部 分 














1. 初始 化 步骤 。 在 循环 的 第 一 次 迭代 中 ,这 个 部 分 对 循环 交 量 ( 在 这 个 示例 中 是 i ) 进行 设置 。 

2. 限制 步骤 。 在 这 里 指出 什么 时 候 停止 循环 。 一般 人 是 从 1 数 到 10, 但 是 在 编程 语言 中 常 
是 从 0 数 到 9。 在 这 两 种 情况 下 , 循环 中 的 代码 都 会 运行 10 次 ,但 是 对 于 数组 从 0 位 置 开始 的 语 
(比如 JavaScript )， 后 一 种 方法 更 合适 。 这 就 是 循环 的 限制 条 件 为 “小 于 userNum” 而 不 是 “小 于 等 
于 userNum” 的 原因 。 假 设 变量 userNum X 10, 并 且 和 希望 循环 运行 10 次 。 如 果 从 0 数 到 9 (使 用 “小 
于 userNum” 测 试 )， 那 么 循环 运行 10 次 。 如 果 从 0 数 到 10 (使 用 “小 于 等 于 userNum" 3X), 3E 
么 循环 运行 11 次 。 

3. 递增 步骤 。 在 这 里 指定 在 循环 的 每 次 迭代 中 循环 变量 增加 多 少 。 在 这 个 示例 中 ,使 用 ++ 每 次 
将 的 值 加 1。 


种 ui a 


K 3-2 列 出 了 常用 的 JavaScript Math 函数 。 


#23-2 JavaScript Math 函 数 
































E 数 tek 
abs 绝对 值 
sin、cos、tan 标准 三 角 函 数 ， 参 数 用 弧度 表示 
acos, asin, atan 反 三 角 国 数 ， 返 回 值 用 弧度 表示 
exp, log 以 e 为 底数 的 指数 和 自然 对 数 


ceil 返回 大 于 等 于 当前 参数 的 最 小 整数 























(E) 
BO S 描 述 
floor 返回 小 于 等 于 当前 参数 的 最 大 整数 
min 返回 两 个 参数 中 较 小 者 
max 返回 两 个 参数 中 较 大 者 
pow 指数 函数 ， 第 一 个 参数 是 底数 ， 第 二 个 参数 是 宕 
Tandom 返回 介 于 0 和 1 之 间 的 随机 数 
round 返回 当前 参数 最 接近 的 整数 ， 四 舍 五 入 
sqrt 平方 根 





3.2 ”将 值 传递 给 函数 


常常 需要 获得 一 些 信息 并 将 它 交 给 函数 使 用 ， 这 称 为 将 信息 传递 ( pass ) 给 函数 。 例 如 ， 看 一 下 
这 个 函数 定义 : 

function playBall(batterup) 

量 batterup 是 函数 的 参数 。 当 调用 冰 数 时 ,可 以 将 值 传递 给 函数 。 当 处 于 函数 内 部 时 ， 此 数据 

batterup 变量 中 。 可 以 向 函数 传递 需要 使 用 的 任何 数据 , 包括 文本 字符 串 、 数 字 , 甚至 其 他 
JavaScript 对 象 。 例 如 ， 可 以 通过 batterup 变量 传递 文本 字符 串 形 式 的 玩家 名 称 ( "Mantle" ), 或 者 他 在 
aUe (7) (但 是 将 这 两 种 形式 混合 使 USER RI 糕 的 想法 ， 除 非 你 确实 知道 自己 在 做 什么 ) 
与 所 有 变量 一 样 ， 应 该 给 用 作 函 数 参数 的 变量 起 合适 的 名 字 ， 这 个 名 称 应 该 能 够 说 明 变 量 的 用 途 。 

在 一 个 丽 数 中 可 以 有 多 个 参数 ， 只 需 将 它们 放 在 圆 括 号 中 并 用 逗号 分 隔 : 

function currentScore(hometeam,visitors) 

下 面 这 3 个 代码 片段 是 等 效 的 : 


currentScore(6,4); 







































































































































































var homeScore = 6; 
var visitingScore = 4; 
currentScore(homeScore, visitingScore) ; 


currentScore(6, 3+1) ; 

对 于 这 3 个 示例 ,在 currentScore()'P, hometeam M(H 6, visitors 的 值 都 是 4 ( 这 对 于 主 
队 来 说 是 好 消息 )。 

在 这 个 示例 中 , 我 们 将 对 脚本 3-3 作 一 些 调整 , 从 initAl1() 函 数 中 去 掉 一 些 计算 , 将 它们 转移 到 
一 个 带 参数 的 函数 中 ， 这 样 代码 的 作用 就 更 清晰 了 。 产 生 的 脚本 见 脚本 3-4。 


脚本 3-4 通过 将 值 传递 给 setsquare() 函 数 ， 脚 本 更 容易 阅读 和 理解 了 


window.onload = initAll; 























function initAll() { 
for (var i=0; i«24; i++) { 
setSquare(i); 
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function setSquare(thisSquare) { 
var currSquare = "square" + thisSquare; 
var newNum = Math.floor(Math.random() * 75) + 1; 


document.getElementById(currSquare). innerHTML = newNum; 


p^ 将 值 传递 给 函数 








1. setSquare(i); 

这 行 代 码 在 initAl1() 函 数 中 。 我 们 将 守 的 值 传递 给 setsquare() PC. 

2. function setSquare(thisSquare) { 

这 定义 了 setSquare() 函 数 ， 传 递 给 它 的 是 我 们 要 更 新 的 当前 格子 的 编号 。 我 们 传递 的 是 循环 变 
量 i。 当 函数 接收 这 一 数据 时 ， 数 据 保存 在 参数 thissquare 中 。 可 以 这 样 理解 : 将 传递 给 函数 ， 用 
这 一 数据 填充 参数 thisSquare， 但 是 函数 实际 上 看 不 到 i。 在 函数 内 部 ， 它 只 知道 thisSquare。 

3. var currSquare = "Square" +thisSquare; 

为 了 使 脚本 后 面 的 getElementById() 调 用 更 清晰 ， 我 们 创建 并 设置 一 个 新 变量 : currSquare. iX 
是 要 处 理 的 当前 格子 的 id。 它 将 文本 字符 串 "square" 和 thisSquare 变量 拼接 起 来 。 


4. document.getElementById(currSquare).innerHTML = newNum; 


这 一 行 找到 具有 currSquare 指定 的 名 字 的 元 素 ， 并 让 它 显 示 newNum。 


3.3 ”探测 对 象 


在 编写 脚本 时 ， 你 可 能 希望 检查 浏览 器 是 否 有 能 力 理解 你 要 使 用 的 对 象 。 进 行 这 种 检查 的 方法 称 
为 对 象 探 测 ( object detection )。 

方法 是 对 要 寻找 的 对 象 进行 条 件 测试 ， 如 下 所 示 : 

if (document.getElementById) { 

如 果 对 象 存在 ，if 语句 就 为 true， 脚 本 继续 执行 。 但 是 ,如果 浏 览 器 不 理解 这 个 对 象 ， 测试 就 返 
回 false， 并 执行 条 件 语句 的 else 部 分 。 脚 本 3-5 给 出 所 需 的 JavaScript, 图 3-3 显示 在 老式 浏览 器 中 
的 结果 。 


脚本 3-5 “对象 探测 是 脚本 开发 人 员 的 重要 工具 


window.onload = initAll; 










































































function initAll() { 
if (document.getElementById) ( 
for (var i=0; i«24; i++) ( 
setSquare(i); 


} 
else { 
alert("Sorry, your browser doesn't support this script"); 


} 


function setSquare(thisSquare) { 
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var currSquare = "square" + thisSquare; 
var newNum = Math.floor(Math.random() * 75) + 1; 


document.getElementById(currSquare).innerHTML = newNum; 





homepage.mac.com - [JavaScript Application] 





个 Sorry, your browser doesn't support this script 








证 

















图 3-3 “对象 探测 拒绝 这 种 老式 浏览 器 (Mac 的 Netscape 4 ) 并 显示 这 个 错误 消 ) 


1. if (document.getElementById) { 
这 是 条 件 语句 的 开头 。 如 果 圆 括号 中 的 对 象 存在 ， 测 试 就 会 返回 true， 并 运行 initAl1() 函 数 中 
的 正常 代码 。 
2.else { 
alert("Sorry, your browser doesn't support this script"); 
} 
如 果 步 又 1 中 的 测试 返回 false， 这 一 行 就 会 弹出 警告 框 ， 脚 本 结束 运行 。 
在 生产 环境 中 , 更 好 的 方法 是 让 用 户 有 别 的 选择 , 或 者 至 少 提 供 不 需 要 这 一 功能 的 其 他 页 面 版 本 。 
但 是 ， 这 里 没什么 可 做 的 。 
V 提示 
OQ 一 定 要 知道 ， 不 必 总 是 检查 document.getElementById。 要 检查 哪些 对 象 取决 于 脚本 要 使 用 的 
对 象 。 如 果 脚本 使 用 的 对 象 并 没有 得 到 浏览 器 100% 的 支持 ， 那 么 总 是 应 该 首先 检查 浏览 器 是 
和 否 能 够 处 理 它 ， 而 不 要 想当然 地 认为 浏览 器 可 以 处 理 它 。 为 了 节省 篇 幅 , 本 书 中 的 脚本 没有 进 
行 对 象 探测 ， 但 是 在 真实 环境 中 ， 这 是 很 重要 的 。 























Iri 

































































已 过 时 的 探测 方式 

览 器 支持 哪些 对 象 ， 另 一 ue 法 是 进行 浏览 器 探测 (browser detection )， 这 种 

尝试 查 明 用 户 使 用 哪 种 浏览 器 查看 页 面 。 它 向 浏 1 求 用户 代 理 字符 串 ， 这 个 字符 串 会 报告 
iios ey 然后 就 可 以 让 脚本 以 一 种 方式 为 某 些 浏览 器 服务 ， 而 对 其 他 浏览 器 采用 另 一 种 
方式 。 这 是 一 种 已 经 过 时 的 脚本 编程 方法 ， 因 为 它 的 效果 不 太 好 。 

浏览 器 探测 要 求 你 了 解 哪些 浏览 器 支持 你 编写 的 脚本 ， 哪 些 不 支持 。 但 是 ， 对 于 你 从 来 没有 使 
用 过 的 浏览 器 ， 或 者 在 脚本 编写 好 之 后 发 布 的 新 浏览 器 ， 应 该 怎么 办 呢 ? 

更 糟糕 的 是 ,许多 浏览 器 故意 报告 错误 的 信息 ， 从 而 试图 通过 浏览 器 探测 的 检查 。 例如， 苹果 
的 Safari 浏览 器 声称 它 是 Mozilla 浏览 器 ,但 它 实际 上 不 是 ,而 且 大 部 分 浏览 器 ( 比如 Safari, Chrome 
和 Opera) 允许 用 户 设置 用 户 代 理 字符 E a 
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况且 ， 不 断 修改 脚本 来 适应 所 有 的 浏览 器 版 本 不 现实 ， 这 是 一 场 必 输 无 疑 的 比赛 。 
试图 探测 浏览 器 支持 的 JavaScript 版 本 也 有 同样 的 问题 。 我 们 强烈 建议 不 要 采用 这 些 探测 方法 ， 
而 是 使 用 对 象 探测 。 


3.4 ”处 理 数组 


在 这 个 示例 中 ,我 们 要 介绍 男 一 个 有 用 的 JavaScript 对 象 : 数组 (array). 数组 是 一 种 可 以 存储 一 
组 信息 的 变量 。 与 变量 一 样 ， 数 组 可 以 包含 任何 类 型 的 数据 : 文本 字符 串 、 数 字 、 其 他 JavaScript 对 
象 。 在 声明 数组 时 ， 将 数组 的 元 素 放 在 圆 括号 中 ， 以 逗号 分 隔 ， 如 下 所 示 : 

var newCars = new Array("Toyota", "Honda", "Nissan"); 

在 此 之 后 ，newCars 数组 就 包含 这 3 个 表示 汽车 制造 商 的 文本 字符 串 。 要 访问 数组 的 内 容 ， 应 该 
使 用 变量 名 和 数组 成 员 的 索引 号 (index number )， 索 引号 要 放 在 方 括号 中 。newCars[2] 返 回 "Nissan'"， 
因为 与 JavaScript 中 的 大 多 数 编号 一 样 ， 数 组 编号 是 从 零 开 始 的 。 注 意 在 上 面 的 例子 中 ， 我 们 使 用 
文本 字符 串 作 为 数组 元 素 。 每 个 文本 字符 串 用 直 引 号 括 起 来 ， 用 来 分 隔 数组 元 素 的 逗号 放 在 直 引 号 
外 面 。 

在 这 个 示例 中 ( 见 脚本 3-6 )， 我 们 开始 确保 Bingo 卡片 是 有 效 的。 在 真实 的 Bingo 卡片 上 ， 每 列 
具有 不 同 的 数字 范围 : B 列 是 1 ~ 15, I 列 是 16~30, N 列 是 31~45, G 列 是 46 ~ 60, O 列 是 61 ~ 75. 
如 果 再 看 看 图 3-1， 就 会 发 现 它 不 是 有 效 的 卡片 ， 因 为 生成 它 的 脚本 仅仅 是 将 1 ~ 75 的 随机 数 简单 地 
放 在 每 个 格子 里 。 这 个 示例 只 用 3 行 新 代码 纠正 这 个 问题 。 完 成 之 后 ， 卡 片 会 像 图 3-4 这 样 。 它 仍然 
不 是 有 效 的 Bingo 卡片 (注意 , 一 些 列 中 有 重复 的 数字 )， 但 是 已 经 比较 接近 了 。 


脚本 3-6 ”这 个 脚本 限制 了 每 一 列 中 值 的 范围 


window.onload = initAll; 















































































































































function initAll() { 
if (document.getElementById) { 
for (var i=0; i«24; i++) ( 
setSquare(i); 


} 
else { 
alert("Sorry, your browser doesn't support this script"); 


} 


function setSquare(thisSquare) { 
var currSquare = "Square" + thisSquare; 
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,454,4,4); 
var colBasis - colPlace[thisSquare] * 15; 
var newNum = colBasis + Math.floor(Math.random() * 15) + 1; 


document.getElementById(currSquare) innerHTML - newNum; 
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Ê Make Your Own Binge Card - Windows internet... — |=) [sce] 
Owe n. | 好 | x LG 
4 Favontes s9 i Mate Your Own Binge ... Bim 


Create A Bingo Card 





B I N G o 


7 21 35 46 73 





10 25 39 59 70 





2 18 | Free} 59 68 





2 26 37 52 61 




















13 23 36 47 70 


Click here to create a new card 


@ rtemet | Protected Mode: On 10% ~ 











图 3-4 这 个 Bingo 卡片 已 经 有 所 改进 ， 但 是 仍然 不 完全 有 效 ， 因 为 一 些 列 中 有 重复 的 数字 


信使 用 数组 














1. var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 

我 们 希望 限制 哪些 随机 数 可 以 放 在 哪 一 列 中 。 最 简单 的 方法 是 给 每 一 列 分 配 一 个 编号 (B: 0, I: 
1, N: 2, G: 3, O: 4), 然后 用 以 下 表达 式 计算 可 以 放 进 每 一 列 中 的 数字 :( 列 号 x15)+ (1~15 的 
随机 数 )。 

要 用 colPlace 数组 记录 每 个 格子 所 属 的 列 。 它 包含 0 ~4 的 数字 并 重复 5 次 ( 要 减 去 空 的 格子 。 
请 注意 ,数字 2 仅 用 了 4 次 )。 

2.var colBasis = colPlace[thisSquare] * 15; 

var newNum = colBasis + Math.floor(Math.random() * 15) + 1; 

我 们 首先 计算 列 号 : 存储 在 colPlace[thissquare] 中 的 数字 乘 以 15。 newNum 变量 仍然 生成 随机 数 ， 
但 不 是 1 ~ 75 的 数字 ， 而 是 计算 一 个 1 ~ 15 的 随机 数 ， 然 后 加 上 列 号 。 因 此 ， 如 果 随 机 数 是 7， 那 么 
它 在 B 列 中 是 7, 在 I 列 中 是 22, 在 N 列 中 是 37, 在 G 列 中 是 52, TE O 列 中 是 67。 


3.5 处理 有 返回 值 的 函数 


到 目前 为 止 ， ee Mant i 
果 。 脚 本 3-7 将 前 面 示例 中 的 一 些 计算 转移 到 一 个 函数 中 ， 这 个 函数 为 Bingo 卡片 上 的 单元 格 返 回 随 
机 数 ， 然 后 另 一 个 函数 使 用 它 返回 的 结果 ， 这 使 整个 脚本 更 容易 理解 了 
脚本 3-7 ”函数 可 以 返回 一 个 值 ， 然 后 脚本 可 以 使 用 这 个 值 


window.onload = initAll; 





















































function initAll() { 
if (document.getElementById) { 
for (var i=0; i«24; i++) ( 
setSquare(i); 
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} 
else { 
alert("Sorry, your browser doesn't support this script"); 
} 
} 


function setSquare(thisSquare) { 
var currSquare = "square" + thisSquare; 
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
var colBasis = colPlace [thisSquare] * 15; 
var newNum = colBasis + getNewNum() + 1; 





document .getElementById(currSquare).innerHTML = newNum; 


} 


function getNewNum() { 
return Math.floor(Math.random() * 15); 


> 从 函数 返回 一 个 值 

1. var newNum = colBasis + getNewNum() + 1; 

这 一 行将 newNum 变量 设置 为 需要 的 数字 ,但 是 已 经 将 随机 数 的 生成 转移 到 了 函数 getNewNum() 中 。 
通过 将 这 一 计算 转移 到 函数 中 ， 脚 本 中 的 运算 过 程 更 容易 理解 了 。 

2. function getNewNum() { 

return Math.floor(Math.random()* 15); 

} 
这 行 代 码 计算 一 个 0~ 14 的 随机 数 并 返回 它 。 在 可 以 使 用 变量 或 数字 的 任何 地 方 ， 都 可 以 使 用 这 
个 函数 。 

V 提示 

O 可 以 返回 任何 值 。 字 符 串 、 布 尔 值 和 数字 都 可 以 。 


3.6 ”更 新 数组 


如 图 3-4 所 示 ， 这 个 Bingo 卡片 脚本 还 无 法 确保 给 定 的 列 中 不 出 现 重复 的 数字 。 这 个 示例 要 纠正 
这 个 问题 ， 同 时 说 明 数 组 不 必 进 行 初 始 化 并 读 取 ， 而 是 可 以 在 运行 时 声明 和 设置 它们 。 这 会 提供 很 大 
的 灵活 性 ， 因 为 可 以 在 脚本 运行 时 通过 计算 或 函数 修改 数组 中 的 值 。 脚 本 3-8 演示 了 具体 的 做 法 ， 其 
中 只 有 几 行 新 代码 。 


脚本 3-8 将 数组 的 内 容 改 为 存储 当前 值 是 一 种 非常 强大 的 技术 


window.onload = initAll; 
var usedNums = new Array(76); 




































































function initAll() { 
if (document.getElementById) { 
for (var i=0; i«24; i++) ( 
setSquare(i); 


} 
else { 
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alert("Sorry, your browser doesn't support this script"); 
} 
} 


function setSquare(thisSquare) { 
var currSquare = "square" + thisSquare; 
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
var colBasis = colPlace[thisSquare] * 15; 
var newNum = colBasis + getNewNum() + 1; 


if (!usedNums[newNum]) { 
usedNums[newNum] = true; 
document. getElementById(currSquare).innerHTML = newNum; 


} 
} 


function getNewNum() { 
return Math.floor(Math.random() * 15); 
} 


> 在 运行 时 更 新 数组 

1. var usedNums = new Array(76); 

这 是 一 种 声明 数组 的 新 方法 。 我 们 将 usedNums 变量 声明 为 一 个 包含 76 个 对 象 的 新 数组 。 正 如 前 
面 提 到 的 ， 这 些 对 象 可 以 是 任何 东西 。 在 这 个 示例 中 ， 它 们 是 布尔 值 ， 即 true/false fH. 

2. if (lusedNums [newNum]) { 

usedNums[newNum] = true; 

如 果 usedNums 数组 中 的 newNum 位 置 上 是 false ( 表达 式 前 面 的 ! 表 示 “ 非 ”)， 那 么 就 将 它 设置 为 
true， 并 将 newNum 写 到 卡片 上 。 如 果 newNum 位 置 上 是 true， 就 什么 也 不 做 。 这 样 就 不 会 有 重复 的 数 
F, 但 是 卡片 上 可 能 会 留 下 空格 ( 见 图 3-5 )。 在 下 一 节 中 ,我们 要 解决 这 个 缺陷 。 


eoo Make Your Own Bingo Card 
[8 http://www javascriptworld.com/js7e/ d Q7 













































































Create A Bingo Card 
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3 29 34 55 74 





5 27 | 41 54 65 























13 Free] 58 62 
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Click here to create a new card 























图 3-5 我 们 消除 了 重复 的 数字 ， 但 是 现在 留 下 了 一 些 空格 子 ， 还 需要 重新 来 过 

















V 提示 

口 为 什么 这 个 数组 要 包含 76 个 元 素 ? 因为 我 们 希望 使 用 1-75 的 值 。 如 果 将 它 声 明 为 包含 75 
个 元 素 , 那么 编号 是 从 0 ~ 74。76 个 元 素 允 许 我 们 使 用 1 ~ 75 WE, 只 需 忽略 第 0 号 元 素 即 可 。 
口 如 果 不 对 布尔 值 进行 初始 化 ， 那 么 它们 会 自动 设置 为 false。 
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3.7 ”使 用 dolwhile 循环 


有 时 候 ， 需 要 让 代码 循环 许多 次 ， 但 是 无 法 确定 需要 循环 多 少 次 。 在 这 种 情况 下 ， 就 要 使 用 
do/while 循环 : 只 要 某 个 条 件 为 true， 就 执行 某 种 操作 。 脚 本 3-9 像 前 面 一 样 写 每 行 的 数字 , 但 是 这 一 
次 在 将 数字 放 进 单元 格 之 前 ， 它 首先 检查 是 否 已 经 使 用 了 这 个 数字 。 如 果 这 个 数字 已 经 用 过 了 ,脚本 就 


ir 

















生成 新 的 随机 数 并 重复 这 个 过 程 ， 直 到 找到 不 重复 的 数字 为 止 。 图 3-6 显示 了 最 终 有 效 的 Bingo 卡片 。 











eoo Make Your Own Bingo Card 
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Create A Bingo Card 
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15 16 | 43 | 46 | 63 





5 23 36 | 48 | 66 











12 | 28 | 44 57 | 72 























Click here to create a new card 


(E 
3-6 最终， 我 们 得 到 了 有 效 的 Bingo 卡片 























脚本 3-9 ”这 个 脚本 防止 给 定 的 列 中 出 现 重复 的 数字 


window.onload = initAll; 
var usedNums = new Array(76); 


function 


initAl1() { 


if (document.getElementById) { 
for (var i=0; i«24; i++) ( 


setSquare(i); 


} 
else { 
alert("Sorry, your browser doesn't support this script"); 


} 
} 


function 
var 
var 
var 
var 


do { 
newNum = colBasis + getNewNum() + 1; 


setSquare(thisSquare) { 

currSquare = "Square" + thisSquare; 

colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
colBasis = colPlace[thisSquare] * 15; 

newNum ; 


while (usedNums [newNum]) ; 


usedNums[newNum] = true; 
document.getElementById(currSquare).innerHTML = newNum; 
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function getNewNum() { 
return Math.floor(Math.random() * 15); 


} 
=> 使 用 do/while 循环 








1. var newNum; 

在 前 面 的 示例 中 , 我 们 在 创建 newNum 变量 时 对 它 进行 初始 化 。 因 为 我 们 将 多 次 设置 它 , 所 以 在 进 
入 循环 之 前 创建 它 ， 这 样 只 需 创 建 一 次 。 

2. do { 

这 一 行 开始 do 代码 块 。 关 于 这 种 循环 必须 记 住 的 一 点 是 ，do 块 中 的 代码 至 少 会 执行 一 次 。 

3. newNum = colBasis + getNewNum() + 1; 

与 前 面 的 示例 一 样 ， 循 环 中 的 这 行 代码 将 newNum 变量 设置 为 我 们 需要 的 数字 。 

4. } 

右 花 括号 结束 do 块 。 

5. while (usedNums[newNum]) ; 

while 检查 会 使 do 代码 块 反复 执行 ， 直 到 检查 结果 为 false 为 止 。 在 这 个 示例 中 ， 我 们 检查 
usedNums[ ] 数 组 中 newNum 位 置 上 的 值 ， 从 而 检查 newNum 是 否 已 经 使 用 过 了 。 如 果 这 个 数字 已 经 用 过 
了 ， 控 制 就 被 传递 回 do 块 的 开头 ， 整 个 过 程 再 次 重复 。 最 终 ， 我 们 会 找到 一 个 没有 使 用 过 的 数字 。 
在 此 之 后 ， 就 会 离开 循环 ， 将 usedNums 设置 为 true， 并 将 newNum 写 到 卡片 上 。 

v 提示 

O do/while 循环 的 一 种 常见 用 途 是 ， 从 用 户 输入 的 数据 中 去 掉 空 格 或 无 效 的 字符 。 但 是 要 记 住 ， 

无 论 while 检查 计算 出 true 还 是 false，do 代码 块 至 少 会 执行 一 次 。 


3.8 以 多 种 方式 调用 脚本 


到 目前 为 止 , 你 看 到 的 脚本 都 是 在 加 载 页 面 时 自动 运行 的 。 但 是 在 现实 环境 中 ， 常 常 希望 让 用 户 
对 脚本 有 更 多 的 控制 能 力 ， 甚 至 允许 他 们 控制 脚本 在 何 时 运行 。 在 这 个 示例 中 ( 见 脚 本 3-10 )， 脚 本 
仍然 在 加 载 页 面 时 运行 。 但 是 ， 还 允许 用 户 单 击 页 面 底部 的 链接 来 重新 运行 脚本 ， 这 样 就 可 以 完全 在 
浏览 器 中 生成 Bingo 卡片 ， 而 不 需要 从 服务 器 重新 加 载 页 面 。 这 向 用 户 提供 了 快速 的 响应 ， 而 且 不 会 
POE B A e TAK 


脚本 3-10 ”让 用 户 有 能 力 自己 运行 脚本 


window.onload = initAll; 
var usedNums = new Array(76); 




































































































































































function initAll() { 
if (document.getElementById) { 
document.getElementById("reload").onclick = anotherCard; 
newCard(); 


} 
else { 
alert("Sorry, your browser doesn't support this script"); 
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function newCard() { 
for (var i-0; i«24; i++) ( 
setSquare(i); 


} 


function setSquare(thisSquare) { 
var currSquare = "square" + thisSquare; 
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
var colBasis = colPlace[thisSquare] * 15; 
var newNum; 





do { 
newNum = colBasis + getNewNum() + 1; 


while (usedNums[newNum] ) ; 


usedNums[newNum] = true; 
document .getElementById(currSquare).innerHTML = newNum; 


} 


function getNewNum() { 
return Math.floor(Math.random() * 15); 
} 


function anotherCard() { 
for (var i=1; i«usedNums.length; i++) { 
usedNums[i] = false; 


} 


newCard(); 
return false; 


} 
> 以 多 种 方式 调用 脚本 


1. document.getElementById("reload").onclick = anotherCard; 








newCard(); 
我 们 已 经 看 到 过 initAll() we, (AEN initAl1() 函 数 有 一 些 变化 : 在 HTML 页 面 ( 它 的 
id 是 reload， 见 脚本 3-1) 上 设置 链接 ， 让 它 在 被 单 击 时 调用 anotherCard()。initAl1() 函 数 中 原来 
的 所 有 计算 现在 被 转移 到 新 的 newCard() 函 数 中 , 这 里 只 需 调用 newCard() ek, newCard() 函 数 中 没有 
需要 讨论 的 新 代码 。 
2. function anotherCard() { 
for (var i=1; i«usedNums.length; i++) { 

















usedNums[i] = false; 


newCard(); 
return false; 


48 第 3 章 第 一 个 Web 应 用 程序 





























这 是 anotherCard() 孙 数 ， 当 用 户 单 击 链 接 时 会 调用 这 个 函数 。 它 执行 3 个 操作 : 

口 将 usedNuns[ ] 数 组 中 的 所 有 元 素 设置 为 false 这 样 就 可 以 重新 使 用 所 有 数字 ); 

口 调用 newCard() 函 数 〈 生 成 另 一 个 卡片 ); 

O 返回 false 值 ， 使 浏览 器 不 尝试 加 载 链 接 的 href 中 指定 的 页 面 (这 在 第 2 章 中 讨论 过 ) 

V 提示 

口 到 了 现在 ， 你 已 经 知道 了 如 何 使 用 JavaScript 重新 加 载 页 面 的 一 部 分 ， 而 不 需要 向 服务 器 请 求 
整个 新 页 面 ， 而 这 正 是 许多 人 认为 的 Ajax 基本 特色 。 从 第 13 章 起 ， 我 们 将 详细 讨论 Ajax。 


3.9 组 合 使 用 JavaScript 和 CSS 


对 于 目前 的 Bingo 示例 , 你 可 能 会 觉得 奇怪 :“ 他 们 都 说 JavaScript 可 以 提供 所 有 交互 功能 , 但 是 
为 什么 看 不 到 任何 用 户 交 互 呢 ?9 ”这 是 一 个 很 合理 的 问题 ， 现 在 就 讲解 如 何 让 用 户 能 够 操作 所 生成 的 
Bingo 卡片 。 为 此 ， 脚 本 3-11 通过 iene JavaScript 来 利用 CSS 的 功能 。 


脚本 3-11 通过 JavaScript 添加 一 个 类 ， 使 代码 可 以 利用 CSS 的 功能 


window.onload = initAll; 
var usedNums = new Array(76); 

































































function initAll() { 
if (document.getElementById) { 
document.getElementById("reload").onclick = anotherCard; 
newCard(); 
} 
else { 
alert("Sorry, your browser doesn't support this script"); 


} 


function newCard() { 
for (var i-0; i«24; i++) { 
setSquare(i); 


} 


function setSquare(thisSquare) { 
var currSquare = "Square" + thisSquare; 
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
var colBasis = colPlace[thisSquare] * 15; 
var newNum; 


do { 
newNum = colBasis + getNewNum() + 1; 


while (usedNums[newNum]) ; 


usedNums[newNum] = true; 
document.getElementById(currSquare).innerHTML = newNum; 
document.getElementById(currSquare).className - ""; 
document.getElementById(currSquare).onmousedown = toggleColor; 


) 


function getNewNum() ( 


3.9 ”组合 使 用 JavaScript 和 CSS 49 





return Math.floor(Math.random() * 15); 
} 


function anotherCard() { 
for (var i=1; i<usedNums.length; i++) { 
usedNums[i] = false; 


} 
newCard(); 
return false; 
} 
function toggleColor(evt) { 
if (evt) { 
var thisSquare = evt.target; 
} 
else { 
var thisSquare = window.event.srcElement; 
if (thisSquare.className == "") { 
thisSquare.className = "pickedBG"; 
} 
else { 
thisSquare.className = ""; 
} 
} 


= 使 用 JavaScript 应 用 样式 











"n, 
3 


1. document.getElementById(currSquare).className = 
document.getElementById(currSquare).onmousedown = toggleColor; 

因为 Bingo 卡片 是 可 以 重复 使 用 的 , 所 以 要 确保 Bingo 卡片 最 初 是 空 的 : 对 于 在 setSquare() Pix 
置 的 每 个 格子 ， 把 class 属性 设置 为 ""( 空 字符 串 )， 并 让 onmousedown 事件 处 理 程序 调用 新 的 
toggleColor()PÉZi, 

2. function toggleColor(evt) { 

如 果 你 是 CSS 专家 ,那么 可 能 会 注意 到 ， 脚 本 3-2 中 声明 了 我 们 从 来 没有 使 用 过 的 样式 。 现 在 ， 
在 新 的 toggleColor() 函 数 中 就 要 使 用 这 些 样式 了 。 用 户 现在 可 以 单 击 卡片 上 的 任何 格子 ， 这 个 格子 
的 背景 颜色 就 会 改变 ， 表 示 这 个 号 码 已 经 被 叫 过 了 。 




















3. if (evt) { 
var thisSquare - evt.target; 
} 
else { 
var thisSquare = window.event.srcElement; 


























首先 , 需要 查 明 单 击 的 是 哪个 格子 。 但 糟糕 的 是 ,， 这 有 两 种 方式 : TE 方式 和 其 他 所 有 浏览 器 处 理 
有 件 的 方式 。 

如 果 一 个 称 为 evt 的 值 被 传递 给 这 个 函数 ， 就 说 明 用 户 的 浏览 器 不 是 三， 可 以 看 到 evt 的 目标 。 
如 果 浏 览 器 是 正 ， 就 需要 查看 window 对 象 的 event 属性 的 srcElement 属性 。 无 论 采 用 哪 种 方式 ， 都 
会 得 到 thisSquare 对 象 ， 然 后 可 以 检查 和 修改 这 个 对 象 。 








dint 
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4. if (thisSquare.className == "") { 

thisSquare.className = "pickedBG"; 
j 
else ( 

thisSquare.className - ""; 
} 

在 这 里 , 检查 被 单 击 的 格子 的 class 属性 是 否 有 一 l^ [16 Hotes ous Om Bingo Cua E 
个 值 。 如 果 没有 ， 就 给 它 设置 pickedBG 值 ， 因 为 格子 EE ged 
的 背景 表示 这 个 数字 已 经 被 选择 了 。 

现在 仅仅 修改 class 属性 并 不 会 改变 页 面 上 的 任何 Cronte A Bingo Cani 





东西 ,但 是 请 回顾 脚本 3-2 中 的 CSS. class 为 pickedBG 
的 任何 标签 的 背景 颜色 与 free 格子 相同 。 在 这 里 修改 
class 会 对 这 个 格子 自动 应 用 这 个 样式 ， 使 它 显示 粉红 
fatis ( 见 图 3-7 )。 

当然 ， 用 户 可 能 选 错 格子 ， 需 要 有 办 法 纠正 错误 。 
再 次 单 击 格子 ， 这 一 次 className 有 一 个 值 ， 所 以 把 它 
恢复 为 空 字符 串 。 

也 可 以 不 修改 格子 上 的 class 属性 , 而 是 修改 它 的 
style 属性 ， 这 样 就 不 必 为 CSS 文件 操心 了 。 但 是 这 种 









































Click here to create a new card 





























方法 不 好 。 我 们 希望 利用 CSS 文件 ， 因 为 它 只 修改 页 ae — 
TDRSS, TORMERE RGR. 图 3-7 用 户 叫 过 号 码 的 格子 会 被 加 上 标记 
关于 位 的 说 明 


在 使 用 布尔 值 时 ， 处 理 的 值 要 么 是 true, RAR false。 也 可 以 认为 这 些 变量 包含 0 或 1， 因 
为 这 是 计算 机 在 内 部 处 理 任何 信息 的 方式 (把 true 表示 为 1， 把 false 表示 为 0 )。 

这 些 值 (0 和 1 ) 称 为 位 (bit), 这 些 位 组 成 计算 机 存储 的 信息 。 可 以 把 每 个 位 看 作 一 个 电灯 开 
关 ， 其 状态 要 么 是 开 ， BARK, 

因为 计算 机 中 的 所 有 信息 只 是 一 系列 位 , 所 以 需要 能 够 操作 这 些 位 ,尤其 是 需要 能 够 比较 它们 。 
下 面 是 需要 的 一 些 内 部 操作 。 
口 与 (&) : 在 对 两 个 位 进行 “与 ”计算 时 ， 如 果 它 们 都 是 true( 即 都 是 1 )， 结 果 就 是 true; F 
则 ， 结 果 是 false. 
Ox (|): 在 对 两 个 位 进行 “或 ”计算 时 ， 如 果 其 中 之 一 是 true ( 即 其 中 之 一 是 1 )， 结 果 就 是 

true; 如 果 它 们 都 是 false， 结 果 就 是 false。 

对 大 于 1 的 数字 使 用 “与 ”和 “或 ”操作 符 ， 称 为 位 算术 (bitwise arithmetic )。 计 算 机 在 内 部 
把 每 个 数字 转换 为 二 进 制 值 ， 然 后 比较 各 个 位 。 因 为 这 个 过 程 在 内 部 进行 ， 所 以 不 需要 你 亲自 执行 
转换 。 
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3.10 ”检查 状态 

让 用 户 能 够 给 格子 加 标记 之 后 ， 还 可 以 检查 格子 是 否 构 成 了 获胜 模式 。 在 这 个 示例 中 ,用户 选 择 
那些 已 经 被 叫 过 的 号 码 ， 脚 本 3-12 会 让 用 户 知道 他 们 什么 时 候 获胜 了 。 
脚本 3-12 这 个 脚本 使 用 复杂 的 数学 计算 判断 获胜 组 合 


window.onload = initAll; 
var usedNums = new Array(76); 


























function initAll() { 
if (document.getElementById) { 
document.getElementById("reload").onclick = anotherCard; 
neuCard(); 


else { 
alert("Sorry, your browser doesn't support this script"); 
} 
} 


function newCard() { 
for (var i-0; i«24; i++) ( 
setSquare(i); 


} 


function setSquare(thisSquare) { 
var currSquare = "square" + thisSquare; 
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
var colBasis = colPlace [thisSquare] * 15; 
var newNum; 


do { 
newNum = colBasis + getNewNum() + 1; 


while (usedNums[newNum]) ; 


usedNums[newNum] = true; 

document .getElementById(currSquare).innerHTML = 
document .getElementById(currSquare).className = 
document .getElementById(currSquare).onmousedown = toggleColor; 


newNum ; 


"n, 
3 


} 


function getNewNum() { 
return Math.floor(Math.random() * 15); 
} 


function anotherCard() { 
for (var i=1; i«usedNums.length; i++) { 
usedNums[i] = false; 


newCard(); 
return false; 
} 
function toggleColor(evt) { 


if (evt) ( 
var thisSquare - evt.target; 
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} 
else { 
var thisSquare = window.event.srcElement; 
if (thisSquare.className == "") { 
thisSquare.className = "pickedBG"; 
} 
else { 
thisSquare.className = ""; 
checkWin(); 
} 


function checkWin() { 


var winningOption = -1; 
var setSquares = 0; 


var winners = new Array(31,992,15360, 507904, 541729, 557328, 1083458, 2162820, 4329736, 8519745 , 8659472, 


16252928); 


for (var i-0; i«24; i++) { 
var currSquare = "square" + i; 
if (document.getElementById(currSquare).className !- "") ( 
document.getElementById(currSquare).className - "pickedBG"; 
setSquares - setSquares | Math.pow(2,i); 
} 
} 


for (var i=0; i«winners.length; i++) { 
if ((winners[i] & setSquares) == winners[i]) { 
winningOption = i; 


} 


if (winningOption > -1) { 
for (var i=0; i«24; i++) { 
if (winners[winningOption] & Math.pow(2,i)) { 
currSquare = "square" + i; 
document. getElementById(currSquare).className = "winningBG"; 



























































} 
} 
} 

} 

这 个 示例 要 使 用 一 些 比 较 复杂 的 数学 计算 。 如 果 你 以 前 没有 接触 过 二 进 制 运算 ， 可 以 先 阅读 前 面 
的 补充 内 容 “ 关 于 位 的 说 明 ”。 如 果 和 希望 深入 了 解 ， 可 以 阅读 后 面 的 补充 内 容 “ 按 位 运算 详解 ”( 如 
果 认 为 不 需要 了 解 这 些 细节 ， 也 可 以 跳 过 相关 内 容 )。 

> 检查 获胜 状态 

1. checkWin(); 


每 当 用 户 给 格子 加 标记 时 ,获胜 状态 都 可 能 会 有 变化 ,所 以 在 toggleColor() 的 末尾 要 调用 checkWin(). 


2. va 
va 


r winningOption - -1; 
r setSquares - 0; 


var winners - new Array(31, 992, 15360, 507904, 541729, 557328, 1083458, 2162820, 4329736, 


8519745, 8659472, 16252928); 








在 checkNin() 的 开头 创建 下 面 这 些 新 变量 。 
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O winning0ption， 存 储 用 户 可 能 遇 到 的 获胜 选项 ( 如 果 有 的 话 )。 
口 setSquares， 存 储 已 经 单 击 的 格子 。 
口 winners， 是 一 个 数字 数组 ， 其 中 的 每 个 数字 是 有 效 获胜 组 合 的 编码 值 。 


3. for (var i-0; i«24; i++) { 








var currSquare = "square" + i; 

if (document.getElementById(currSquare).className !- "") ( 
对 于 卡片 上 的 每 个 格子 ,需要 检查 它 的 号 码 是 否 已 经 被 叫 过 。 我 们 将 使 用 格子 的 class 属性 作为 
如 果 它 是 空 的 ， 就 是 没有 被 单 击 过 ; WRA class 属性 值 ， 就 执行 下 面 的 代码 。 


4. document. 











标志 





getElementById(currSquare).className = "pickedBG"; 

setSquares - setSquares | Math.pow(2,i); 
第 一 行 很 简单 ， 实 际 上 它 应 该 是 多 余 的 一 一 class 属性 已 经 设置 为 了 pickedBG。 但 是 ， 也 可 能 
例外 ， 比 如 当 用 户 单 击 了 他 们 原本 不 打算 单 击 的 格子 时 ， 碰 巧 获胜 了 ( 这 会 把 class 属性 重新 设置 为 
winningBG 而 不 是 pickedBG )， 然 后 用 户 再 次 单 击 这 个 格子 恢复 它 的 状态 。 如 果 用 户 实际 上 是 获胜 者 ， 
后 面 会 重新 设置 class 属性 。 
第 二 行使 用 按 位 算术 ， 根 据 卡 片 的 每 个 可 能 状态 把 setSquares 设置 为 一 个 数字 。 单 竖 杠 ( | ) 对 
两 个 值 执行 位 “或 ”计算 : setSquares 本 身 和 数字 2, 2 是 Math.pow(2,i) 的 结果 ， 2" 是 1，2! 是 2， 
2 是 4， 依 次 类 推 。 对 这 两 个 数字 执行 按 位 “或 ”操作 会 产生 一 个 表示 用 户 所 处 状态 的 变量 ( 共有 超 
过 1600 万 个 可 能 的 状态 )。 

5. for (var i=0; i«winners.length; i++) { 
if ((winners[i] & setSquares) == winners[i]) { 
winningOption = i; 














































































































} 
} 
这 是 第 二 个 比较 复杂 的 部 分 。 现在 只 知道 卡片 当前 所 处 的 状态 , 我 们 希望 查 明 它 是 否 是 获胜 状态 。 
在 一 般 的 Bingo 游戏 中 ， 有 12 个 获胜 状态 ， 这 部 分 代码 把 卡片 的 当前 状态 与 每 个 获胜 状态 作 比 较 。 
我 们 在 每 个 获胜 状态 和 当前 状态 之 间 执 行 按 位 “与 ”计算 。 这 会 产生 一 个 新 状态 ， 在 这 个 状态 中 只 
那些 同时 出 现在 两 个 状态 中 的 格子 ， 才 具有 true 值 。 然 后 ， 对 这 个 新 状态 和 同一 个 获胜 状态 作 比 较 ， 
这 样 就 能 够 判断 卡片 是 否 完全 符合 这 个 获胜 模式 ， 即 结果 不 包含 获胜 状态 之 外 的 所 有 选择 ( 因为 在 获 
胜 状 态 中 找 不 到 它们 )， 而 且 只 要 在 获胜 模式 中 找到 的 所 有 格子 也 出 现在 当前 模式 中 ， 用 户 就 是 获胜 
者 。 在 这 里 ， 把 winningOption 设置 为 1， 这 就 是 用 户 匹配 的 模式 。 
6. if (winningOption > -1) { 
for (var i=0; i«24; i++) { 
if (winners[winningOption] & Math.pow (2,i)) { 
currSquare = "square" + i; 
document .getElementById(currSquare).className = "winningBG"; 


} 
} 
} 
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最 后 ， 如 果 winningOption 是 大 于 -1 的 数字 ， 就 说 明 用 户 是 获胜 者 。 在 这 种 情况 下 ， 和 希望 循环 遍 
历 每 个 格子 ， 检 查 在 获胜 模式 中 是 否 可 以 找到 它 。 如 果 是 ， 就 把 class 属性 设置 为 winningBG， 我 们 
的 工作 就 完成 了 ， 见 图 3-8。 

















eoo Make Your Own Bingo Card 


A hups 6  didropboxusercontent.com c |i» 





Create A Bingo Card 





B I N G o 





10 | 20 | 43 | 48 | 61 





8 22 | 34 | 49 69 























EN 19 | 37 | 58 | 75 





Click here to create a new card 














图 3-8 看 起 来 找到 获胜 者 了 ( 颜色 是 闪烁 的 ， 但 是 在 印刷 的 书 中 看 不 出 来 ) 





V 提示 

口 同样 ， 只 需 设 置 获胜 格子 的 class 属性 ， 让 它 与 某 个 CSS 样式 匹配 ， 就 能 够 改变 卡片 的 外 观 。 
但 是 , 因为 纸张 是 静态 的 , 所 以 看 不 出 实际 的 效果 : winningBG 规则 把 背景 设置 为 一 个 动画 gif, 
这 张 图 片 会 在 红色 和 日 色 之 间 缓 慢 地 变化 。 我 的 一 个 朋友 称 它 为 “可 爱 的 讨厌 和 鬼 ”。 

O 有 许多 种 规则 不 同 的 Bingo 游戏 ,它们 的 获胜 模式 各 不 相同 。 只 需 修改 winners 数组 的 初始 化 

代码 ， 脚 本 就 能 够 适应 任何 Bingo 游戏 。 

口 如 果 你 以 前 对 于 条 件 表达 式 为 什么 使 用 8 和 || (分 别 表示 “与 ”和 “或 ”) 觉得 奇怪 ， 现 在 应 
该 明白 原因 了 : JavaScript 使 用 这 些 操作 符 的 单字 符 版 本 执行 二 进 制 算术 而 非 十 进 制 。 













































































安 位 运算 详解 

(正如 前 面 提 到 的 ， 这 里 讲解 的 内 容 很 复杂 ， 在 开始 阅读 之 前 请 作 好 心理 准备 。 如 果 还 没有 作 
好 准备 ， 请 跳 过 这 部 分 。) 

既然 只 有 12 种 可 能 的 获胜 模式 (至少 在 这 个 版 本 的 Bingo 游戏 中 是 这 样 ), 我 们 可 以 很 容易 地 
编写 代码 检查 每 个 获胜 模式 。 但 是 Bingo 游戏 有 许多 不 同 的 版 本 , 这 意味 着 如 果 和 希望 玩 另 一 个 版 本 ， 
就 必须 彻底 修改 检查 获胜 者 的 方式 。 

为 了 避免 这 个 问题 ,我 们 使 用 按 位 算术 (参见 “关于 位 的 说 明 ”) 来 存储 获胜 模式 。 这 意味 着 ， 
我 们 要 利用 计算 机 在 内 部 以 1 和 0 记录 所 有 信息 这 一 性 质 。 所 以 ,我 们 创建 一 个 列表 的 程序 形式 : 


0 V 1 


1 2 
2 4 
3 8 


邮 
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4 16 
5 V 32 
6 64 
7 128 
8 256 
9 512 
10 V 1024 
11 2048 
12 4096 
13 8192 
14 V 16384 
15 32768 
16 65536 
17 131072 
18 262144 
19 V 524288 
20 1048576 
21 2097152 
22 4194304 
23 8388608 


如 果 比 较 一 下 对 钓 左边 列 中 的 数字 ,就 会 发 现 我 们 选择 了 卡片 最 上 面 的 一 行 : square0、square5、 
square10、square14 和 square19。 右 边 列 中 的 数字 是 以 左边 数字 作为 指数 的 2 WHR. 

要 想得到 获胜 模式 的 数字 形式 ， 只 需 找到 这 个 模式 包含 的 格子 ， 并 把 它们 右边 的 数字 加 起 来 。 
在 这 里 ， 就 是 1+32+1024+16384+524288=541729， 这 就 是 在 获胜 者 列表 中 包含 的 数字 。 

要 想 计算 B 列 中 所 有 格子 的 数字 形式 , 只 需 计算 1+2+4+8+16, 结果 是 31。 这 是 另 一 个 获胜 者 。 
对 于 每 个 获胜 模式 ， 都 这 样 做 。 

下 面 到 了 关键 之 处 。 如 果 把 上 面 列 表 的 次 序 颠 倒 过 来 ， 即 从 23 到 0， 然 后 把 对 钧 替换 为 1， 空 
的 地 方 替换 为 0， 就 会 得 到 一 个 24 位 的 三 进 制 数字 。 因 此 ， 第 一 个 获胜 模式 可 以 看 作 00001000010 
0010000100001， 第 二 个 获胜 模式 是 000000000000000000011111。 前 者 是 541729 的 二 进 制 形式 ， 后 
者 是 31 的 二 进 制 形式 。 

在 检查 卡片 上 的 每 个 格子 是 否 被 设置 时 , 把 结果 存储 在 setsquares 中 。 这 个 值 是 玩家 选择 的 所 
有 格子 的 总 和 。 同 样 ， 可 以 把 它 看 作 一 个 24 位 的 二 进 制 数 字 。 

对 所 有 这 些 值 执行 “或 ”计算 ,得 到 setSquares。 在 对 两 个 0 执行 “或 ”计算 (使 用 单 坚 杠 |) 
时 ， 结 果 是 0。 对 于 其 他 任何 组 合 ， 结 果 都 是 1。 

假设 最 终 的 setSquares 是 561424， 这 意味 着 玩家 选择 了 格子 4、8、12、15 和 19， 三 进 制 值 是 
000010001001000100010000。 现 在 ，561424 不 在 获胜 者 列表 中 。 但 是 ， 对 这 个 数字 和 557328 (一 个 
获胜 者 ) 执行 “与 ”计算 ， 会 得 到 : 

000010001001000100010000 & 


000010001000000100010000 
000010001000000100010000 


在 对 两 个 1 执行 “与 ”计算 (使 用 一 个 8 符号 ) 时 ,结果 是 1。 对 于 其 他 任何 组 合 ， 结 果 都 是 0。 
在 代码 中 ,我 们 再 把 结果 值 与 获胜 模式 值 作 比较 ， 如 果 它 们 是 相同 的 (就 像 这 里 的 情况 )， 我 
们 就 找到 了 获胜 者 。 在 这 里 ， 这 是 从 左下 角 到 右上 角 的 对 角 线 组 合 。 











ye 
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如 果 你 现在 还 怀疑 这 样 做 是 否 真 的 比 手工 计算 简便 ,请 考虑 : 如 果 选 择 所 有 4 个 角 上 的 格子 ( 即 
格子 0、4、19 和 23 ) 也 算是 获胜 ， 那 么 只 需 把 数字 8912913 添加 到 获胜 者 数组 中 ， 其 他 地 方 都 不 
需要 修改 。 


3.11 处理 字符 串 数组 


到 目前 为 止 , 我 们 使 用 的 所 有 数组 都 是 由 布尔 值 或 数字 组 成 的 。 作 为 最 后 一 个 与 Bingo 相关 的 示 
例 , 脚本 3-13 用 一 个 字符 串 数组 综合 使 用 了 前 面 学 习 的 所 有 技术 , 创建 一 个 流行 的 “Buzzword Bingo" 
游戏 。 
脚本 3-13 ”这 个 Buzzword Bingo 游戏 可 以 在 沉闷 的 员工 会 议 上 活跃 气氛 , 你 只 需 添 加 自己 的 文本 字符 串 


var buzzwords = new Array ("Aggregate", 
"Ajax", 
"API", 
"Bandwidth", 
"Beta", 
"Bleeding edge", 
"Convergence", 
"Design pattern", 
"Disruptive", 
"DRM", 
"Enterprise", 
"Facilitate", 
"Folksonomy" , 
"Framework", 
"Impact", 
"Innovate", 
"Long tail", 
"Mashup", 
"Microformats", 
"Mobile", 
"Monetize", 
"Open social", 
"Paradigm", 
"Podcast", 
"Proactive", 
"Rails", 
"Scalable", 
"Social bookmarks", 
"Social graph", 
"Social software", 
"Spam", 
"Synergy", 
"Tagging", 
"Tipping point", 
"Truthiness", 
"User-generated", 
































"Workflow" 
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var usedWords 
window. onload 


= new Array(buzzwords. length); 
= initAll; 
function initAll() { 
if (document.getElementById) { 
document.getElementById("reload").onclick = anotherCard; 
neuCard(); 


else { 
alert("Sorry, your browser doesn't support this script"); 
} 
} 


function newCard() { 
for (var i=0; i«24; i++) ( 
setSquare(i); 


} 


function setSquare(thisSquare) { 
do { 
var randomWord = Math.floor(Math.random() * buzzwords.length) ; 


while (usedWords[randomWord]) ; 


usedWords[randomWord] = true; 

var currSquare = "square" + thisSquare; 

document .getElementById(currSquare).innerHTML = buzzwords[randomWord] ; 
document .getElementById(currSquare).className = ""; 

document .getElementById(currSquare).onmousedown = toggleColor; 


} 


function anotherCard() { 
for (var i=0; i«buzzwords.length; i++) { 
usedWords[i] = false; 


} 


newCard(); 
return false; 


} 


function toggleColor(evt) { 
if (evt) ( 
var thisSquare - evt.target; 


else { 
var thisSquare - window.event.srcElement; 


if (thisSquare.className -- "") ( 
thisSquare.className - "pickedBG"; 


else { 
thisSquare.className - 


"n, 


} 
checkWin(); 
} 


function checkWin() { 
var winningOption = -1; 
var setSquares = 0; 
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var winners = new Array(31,992,15360,507904,541729,557328,1083458,2162820,4329736,8519745,8659472, 
16252928); 


for (var i=0; i«24; i++) { 
var currSquare = "square" + i; 
if (document.getElementById(currSquare).className != "") { 
document. getElementById(currSquare).className = "pickedBG"; 
setSquares = setSquares | Math.pow(2,i); 
} 
} 


for (var i=0; i«winners.length; i++) { 
if ((winners[i] & setSquares) == winners[i]) { 
winningOption = i; 


} 


if (winningOption > -1) { 
for (var i=0; i<24; i++) ( 
if (winners[winningOption] & Math.pow(2,i)) { 
currSquare = "square" + i; 
document. getElementById(currSquare).className = "winningBG"; 
} 
} 
} 
} 


p^ 使 用 字符 串 数 组 








1. var buzzwords = new Array("Aggregate", "Ajax", "API", "Bandwidth", "Beta", "Bleeding edge", 
"Convergence", "Design pattern", "Disruptive", "DRM", "Enterprise", "Facilitate", 
^"Folksonomy", "Framework","Impact", "Innovate", "Long tail", "Mashup", "Microformats", 
"Mobile", "Monetize", "Open social", "Paradigm", "Podcast", "Proactive", "Rails", "Scalable", 
"Social bookmarks", "Social graph", "Social software", "Spam", "Synergy", "Tagging", 
"Tipping point", "Truthiness", "User-generated", "Vlog", "Webinar", "Wiki", "Workflow"); 


var usedWords = new Array(buzzwords.length); 

这 个 Buzzword Bingo 游戏 使 用 的 字符 串 都 与 “Web 2.0" AX, 但 是 你 可 以 在 buzzwords 数组 中 添 
加 关于 任何 主题 的 字符 串 。 需 要 至 少 24 个 字符 串 〈 越 多 越 好 )， 而 且 字 符 串 不 应 该 太 长 ( 否则 在 格子 
中 放 不 下 )。 除 此 之 外 没有 任何 其 他 限制 ， 你 可 以 尽量 发 挥 想 象 力 。 

在 初始 化 字符 串 数 组 时 ， 还 需要 初始 化 一 个 新 的 布尔 值 数组 usedwords 。 把 它 的 大 小 声明 为 
buzzwords. length, 这 样 在 添加 新 字符 串 时 就 不 需要 修改 usedWords 数组 一 一 它 会 自动 地 调整 到 合适 的 
长 度 。 

2.do { 

var randomWord = Math.floor(Math.random() * buzzwords. length) ; 


} 


while (usedWords [randomWord]); 









































usedWords[randomWord] - true; 
var currSquare = "square" + thisSquare; 
document.getElementById(currSquare).innerHTML = buzzwords[randomWord]; 
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决定 把 哪个 字符 串 放 在 哪个 格子 中 实际 上 更 简单 ， 因 为 任何 字符 串 可 以 放 在 任何 格子 中 (没有 标 
YE Bingo 游戏 中 的 编号 限制 )。 只 需 确保 获取 一 个 还 未 使 用 过 的 字符 串 ， 把 它 标 为 已 使 用 ， 然 后 写 到 
格子 中 。 
3. for (var i=0; i«buzzwords.length; i++) { 
usedWords[i] = false; 
} 
与 标准 Bingo 卡片 一 样 , 在 生成 一 张 新 卡 片 时 ,必须 把 usedWords 中 的 所 有 标志 设置 为 false, 这 
样 就 可 以 再 次 使 用 它们 。 
V 提示 
O 在 旧金山 举行 的 年 度 Macworld 博览 会 上 ， 通常 由 Steve Jobs 致 开 幕 词 ( 因此 这 被 称 为 Steve 
Note )。 另 一 个 传统 是 与 会 者 要 玩 SteveNote Bingo， 也 就 是 猜 猜 Steve 会 说 哪些 他 喜欢 说 的 词 ， 
比如 “Boom!” 和 “One more thing...” ) 以 及 哪些 谣传 的 产品 真 的 会 出 现 。 
因为 iPhone 附带 了 标准 的 Safari 浏览 器 ,所 以 我 在 Macworld 上 介绍 iPhone 之 后 展示 了 这 个 游 
戏 的 交互 式 版 本 ( 见 图 3-9 )。 它 非常 受 欢迎 ， 尽 管 在 致 开幕 词 时 没有 人 真 的 喊 出 “Bingol”。 
这 个 Bingo 示例 也 可 用 于 其 他 突 发 新 闻 事件 ， 比 如 直播 的 美国 政治 辩论 。 
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dl.dropbox.com/u/212... © [Google — ] 


Web 2.0 Bingo 














B 1 





Beta Enterprise Proactive Long tail 








Impact DRM 





fad social 
User- Bleeding 
generated edge 


Webinar 


Tagging API 








Scalable | Microformats | Social Framework 
software 














Rails | Truthiness | Folksonomy | Disruptive | Monetize 


Click here to create a new card 








图 3-9 ”只 需 一 个 移动 浏览 器 ， 再 加 上 一 点 想象 力 ， 就 
可 以 针对 几乎 任何 场合 编写 一 个 Bingo 游戏 
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qo 最 常见 也 最 显著 的 用 途 之 一 是 在 网 页 上 添加 动画 , 从 而 在 视觉 上 更 具 吸 引力 , 这 就 是 
本 章 的 主题 。 用 JavaScript 实现 的 一 种 常见 且 有 效 的 效果 是 ， 当 用 户 将 鼠标 移动 到 图 像 上 时 ， 

会 改变 网 页 上 的 图 像 ， 这 样 页面 就 能 对 用 户 的 操作 及 时 作出 反应 。 这 种 称 为 翻转 器 (rollover ) 的 效果 
很 容易 实现 ， 而 且 有 许多 应 用 场合 。 

翻转 器 是 强大 的 工具 ,除了 翻转 器 之 外 , 还 可 以 用 JavaScript 实现 很 多 效果 ， 比 如 自动 改变 图 像 、 
创建 广告 条 、 建 立 约 灯 片 和 在 页 面 上 显示 随机 图 像 。 

在 本 章 中 ， 你 将 学 习 如 何 用 JavaScript 实现 所 有 这 些 图 像 效 果 。 让 我 们 开始 吧 。 
目前 需要 了 解 的 HTML 知识 见 表 4-1。 
































































































































表 4-1 目前 需要 了 解 的 HTML 知 识 一 一 图 像 
m g m 性 =z x 
img 其 中 包含 描述 浏览 器 要 显示 的 图 像 的 属性 
src 包含 图 像 的 URL， 这 个 URL 是 相对 于 网 页 的 URL 来 说 的 
width 包含 浏览 器 显示 图 像 所 用 的 宽度 (以 像素 为 单位 ) 
height 包含 浏览 器 显示 图 像 所 用 的 高 度 (以 像素 为 单位 ) 
alt 用 来 在 非 图 形 化 浏览 器 中 替代 图 像 


4.1 创建 翻转 器 


翻转 器 背后 的 思想 很 简单 。 有 两 个 图 像 。 第 一 个 图 像 是 原始 (original ) 图 像 ， 它 与 网 页 的 其 他 部 
分 一 起 加 载 和 显示 。 当 用 户 将 鼠标 移动 到 第 一 个 图 像 上 时 ,浏览 器 快速 地 将 第 一 个 图 像 蔡 换 为 第 二 个 
图 像 ， 即 替换 (replacement) 图 像 ， 这 样 就 产生 了 运动 或 动画 效果 。 

脚本 4-1 给 出 了 最 基本 的 翻转 器 , 所 有 代码 都 在 标准 的 图 像 链接 中 。 首 先 加 载 蓝 色 箭头 ( 见 图 4-1 )， 
当 用 户 将 鼠标 移动 到 这 个 图 像 上 时 ， 用 一 个 红色 的 箭头 替代 它 〈 见 图 4-2 )。 当 用 户 移 走 鼠标 时 ， 重 新 
绘制 蓝 色 箭 头 。 
脚本 4-1 这 是 在 链接 标签 中 实现 翻转 器 的 最 简单 方法 

<!DOCTYPE html» 


<html> 
<head> 
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<title>A Simple Rollover</title> 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<a href="next.html" onmouseover="document.images['arrow'].src='images/arrow_on.gif'" onmouseout- 
"document. images[ 'arrow'].src='images/arrow_off.gif'"><img src="images/arrow_off.gif" id="arrow" 
'alt-"arrow"»«/a» 





























«/body» 
</html> 
eoo A Simple Rollover ral eoo A Simple Rollover x 
tm | AA) | 4 © hpsa di.dropboxusercontent.cor Č | 2» La h | LALA) + | 69 Papsa di.dropboxusercontent.cor © Oi» 
图 4-1 在 用 户 将 鼠标 移动 到 图 像 图 4-2 当 鼠 标 移动 到 图 像 上 时 ， 脚 本 
上 之 前 显示 的 第 一 个 图 像 用 第 二 个 图 像 蔡 换 第 一 个 图 像 
一 些 样式 可 以 应 用 于 页 面 上 的 元 素 ， 我 们 将 这 些 样 式 单独 放 在 一 个 CSS 文件 中 ， 如 脚本 4-2 
所 示 。 
脚本 4-2 在 本 章 的 许多 示例 中 ， 用 于 样式 元 素 的 CSS 文件 
body { 
background-color: #FFF; 
} 
img { 
border-width: 0; 
} 


img#arrow, imgitarrowImg { 
width: 147px; 
height: 82px; 

} 


Sbuttoni, #button2 { 
width: 113px; 
height: 33px; 

} 


.centered { 
text-align: center; 
} 


stadBanner { 
width: 400px; 
height: 75px; 


62 第 4 章 处 理 图 像 


> 创建 翻转 器 











1. «a href="next.html" 
链接 首先 指定 当 用 户 单 击 图 像 时， 浏览 器 将 转 到 哪里 ， 在 这 个 示例 中 是 next.html 页 面 。 
2. onmouseover-"document. images[ 'arrow'].src='images/arrow_on.gif'" 
当 用 户 将 鼠标 移动 到 图 像 上 时 Cid X arrow 的 src), images 目录 中 的 替换 图 像 arrow_on.gif 被 写 
到 文档 窗口 中 。 
3. onmouseout="document. images[ 'arrow'].src='images/arrow_off.gif'"> 
当 和 鼠标 移 走时 ，arrow_off.gif 图 像 重 新 显示 。 
4. «img src="images/arrow off.gif" id-"arrow" alt="arrow"> 
图 像 链接 为 页 面 定义 原始 图 像 的 来 源 。 
V 提示 
口 我 们 在 图 像 标签 中 包含 了 alt 属性 ， 这 是 因为 如 果 和 希望 HTML 符合 W3C 标准 ， 就 必须 有 alt 
属性 〈 这 个 属性 为 非 图 形 化 浏览 器 提供 图 像 的 名 称 或 描述 )， 而 且 使 用 alt 属性 有 助 于 残障 人 
士 访问 你 的 页 面 ， 比 如 用 屏幕 阅读 器 浏览 页 面 的 盲人 用 户 。 
口 确保 所 有 图 像 的 on 版 本 都 存在 , 否则 一 旦 用 户 将 鼠标 悬 停 到 链接 上 , 页 面 会 显示 无 效 图 片 图 标 。 
口 示例 代码 中 同时 使 用 了 双 引 号 和 单 引 号 , 你 可 能 想 知道 两 者 有 何 区 别 。 基 本 上 跟 英 文中 的 用 法 
一 样 : 在 已 经 使 用 双 引 号 的 语句 中 再 使 用 引号 就 需要 用 单 引 号 。 
除 此 之 外 ，JavaScript 并 不 在 意 开 发 者 使 用 哪 种 引号 。 唯 一 需要 注意 的 就 是 引号 一 定 要 成 对 出 
现 ， 以 单 引 号 开始 就 要 以 单 引 号 结束 ， 同 样 ， 以 双 引 号 开始 就 要 以 双 引号 结束 。 














































































































































































































这 种 翻转 器 的 缺点 

这 种 实现 翻转 器 的 方法 非常 简单 ， 但 是 你 应 该 知道 它 有 几 个 问题 和 缺点 。 

口 因为 第 三 个 图 像 是 在 用 户 将 鼠标 移动 到 第 一 个 图 像 上 时 从 服务 器 下 载 的 ,所 以 在 第 三 个 图 像 
替换 第 一 个 图 像 之 前 ， 可 以 察觉 到 延迟 ， 这 对 于 用 调制 解 调 器 而 不 是 宽带 连接 浏览 站 点 的 
用 户 尤 其 明显 。 

口 使 用 这 种 方法 在 老式 浏览 器 中 会 产生 错误 消息 ， 比 如 Netscape 2.0 或 更 早 的 版 本 、 了 下 3.0 或 
更 早 的 版 本 ,或 者 America Online 2.7 浏览 器 。 因 为 很 少 有 人 还 在 使 用 这 些 过 时 的 浏览 器 ， 
所 以 这 已 经 不 是 什么 大 问题 了 。 

我 们 建议 不 要 使 用 这 种 方法 ， 而 是 使 用 4.2 节 中 介绍 的 方法 来 创建 翻转 器 ， 从 而 解决 这 些 问题 

以 及 其 他 问题 。 


4.2 创建 更 有 效 的 翻转 器 


为 了 产生 动画 的 效果 ， 需 要 确保 替换 图 像 立刻 出 现 ， 而 不 能 有 从 服务 器 获得 图 像 所 造成 的 延迟 。 
为 此 ， 使 用 JavaScript 预先 将 所 有 图 像 加载 到 浏览 需 的 缓存 中 ( 这 样 ， 当 需要 它们 时 ， 它 们 已 经 在 用 
户 的 硬盘 上 了 )， 并 且 将 图 像 放 进 脚 本 使 用 的 变量 中 。 这 样 的 话 ， 当 用 户 将 鼠标 移动 到 图 像 上 时 ， 脚 
本 就 会 用 包含 替换 图 像 的 第 二 个 变量 蔡 换 包含 原 图 像 的 变量 。 脚 本 4-3 演示 了 具体 的 做 法 。 视 觉 效 果 
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与 图 4-1 和 图 4-2 相同 ， 但 是 动画 更 加 流畅 。 











脚本 4-3 这 个 HTML Ji Tf 








i 上 唯一 的 JavaScript 是 对 外 部 .js 文件 的 引用 





<!DOCTYPE html» 
<html> 
<head> 


<title>A More Effective Rollover</title> 
<script src="script02.js"></script> 


</head> 
<body> 


<link rel="stylesheet" href="script01.css"> ERI 





«a href-"nexti.html"»«img src-"images/buttoni off.gif" alt-"buttoni" id="button1"></a>&nbsp; &nbsp; 
«a href-"next2.html"»«img src-"images/button2 off.gif" alt-"button2" id="button2"></a> 


«/body» 
«/html» 








为 了 使 JavaScript 更 便于 管理 ,我们 将 JavaScript (KAS A HTML 页 面 中 提取 出 来 并 将 它 放 进 外 部 .js 


文件 中 ， 见 脚本 4-4 (XF 














js 文件 的 更 多 知识 见 第 2 章 )。 


脚本 4-4 这 是 比 脚本 4-1 更 好 的 实现 翻转 带 的 方法 ， 因 为 它 要 灵活 得 多 


window.onload = rolloverInit; 


function rolloverInit() { 
for (var i=0; i«document.images.length; i++) { 
if (document. images[i].parentNode.tagName == "A") { 
setupRollover (document .images[i]); 


} 
} 
} 


function setupRollover(theImage) { 


theImage.outImage = 


new Image(); 


theImage.outImage.src = theImage.src; 


theImage. onmouseout 


= function() { 


this.src = this.outImage.src; 


} 


theImage.overImage 


= new Image(); 
theImage.overImage.src = "images/" + theImage.id + 


_on.gif"; 


theImage.onmouseover = function() { 
this.src = this.overImage.src; 


} 
} 
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1. «script src="scripto2.js"></script> 
这 个 标签 在 HTML 页 面 ( 见 脚本 4-3 ) 中 。 它 使 用 src 属性 向 浏览 器 说 明 到 哪里 寻找 外 部 js 文件 ， 
也 就 包含 JavaScript 的 文件 。 


2. «a href="next1.html"><img src-"images/buttoni off.gif" alt="button1" id="button1"> </a> 


'&nbsp;8&nbsp; 














«a href="next2.html"><img src-"images/button2 off.gif" alt-"button2" id="button2"></a> 
这 两 个 标签 仍然 在 脚本 4-3 中 ,它们 是 用 于 按钮 的 典型 链接 标签 ， 其 中 散人 入 了 图 像 标签 。href 属 
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性 描述 当 
显示 的 图 像 的 路 径 。 链 接 标 签 也 定义 了 
章 描述 的 ，id 对 于 每 个 对 象 必须 是 唯一 的 。 脚 本 使 用 


3. window.onload = rolloverInit; 
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用 户 单 击 链接 时 链接 的 目标 。 在 img 标签 中 ，src EH 
KE alt 文本 。 
图 像 的 id 使 
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提供 在 用 











翻转 带 发 挥 作 








现在 转 到 脚本 4-4， 当 页 面 完成 加 载 时 , 会 触发 window.onload 事件 处 理 程序 。 


rolloverInit() PAX. 
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DU EASE Tc RA IA. S| AT 
4. function rolloverInit() { 














[上 的 元 素 可 


ALA 
能 会 


for (var i=0; i<document.images.length; i++) { 





rolloverInit() 


函数 扫描 页 面 上 的 每 个 图 像 ， 检 查 图 像 外 边 的 标签 





保 在 页 面 完 成 加 载 之 前 脚本 不 会 执行 。 这 是 因为 在 页 画 


户 将 鼠标 移动 到 图 像 上 之 前 
这 两 个 按钮 都 有 id 属性 。 正 如 第 1 
用 。 


这 个 处 理 程序 调用 








i 完成 加 载 之 前 ， 











导致 错误 。 


是 否 是 





《a2 标签 ， 如 果 是 ， 就 说 


明 它 是 一 个 链接 。 这 两 行 中 的 第 一 行 是 函数 的 开头 。 第 二 行 开始 一 个 for...next 循环 , 这 个 循环 遍历 





所 有 图 像 。 它 首先 将 计数 器 变量 i 设置 为 0。 然后， 在 每 次 循环 迭代 


像 数量 ， 就 将 工 递 增 1。 


5. if (document.images[i].parentNode.tagName == ' 








这 里 检查 包围 


tH 














A") ( 














P. WE i 的 值 小 于 文档 中 的 


图 





图 像 的 标签 是 否 是 锚 标 签 。 检 查 方法 是 查看 对 象 的 值 是 否 为 A( A 是 锚 标签 的 名 


称 )。 我 们 来 仔细 看 看 这 里 的 表达 式 。 第 一 部 分 document.images[i] 是 当前 的 图 像 。 它 的 parentNode 














属性 是 包围 它 的 容器 标签 ,而 tagName 提供 容 咒 标签 的 名 称 。 所 以 , 圆 括 号 中 代码 的 意思 














个 特定 的 图 像 ， 包 围 它 的 标签 是 A 吗 ? 7 
6. setupRollover(document.images[i]); 









































是 :“ 对 于 这 


TRIES 5 中 的 测试 结果 是 true， 那 么 调用 setupRollover 函数 并 传递 当前 图 像 。 


7. function setupRollover(theImage) { 











在 逐 行 查看 这 个 函数 之 前 ， 先 看 一 下 整个 函数 的 作 上 月 














的 图 
时 的 图 像 版 本 )， 它 们 本 身 都 是 图 像 对 象 。 因 为 它们 是 
src 属性 了 。outImage 的 src 值 是 当前 
来 的 。 

这 一 行 开 始 setupRollover PAZ, 


8. theImage.outImage = new Image( 

















其 参 
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这 一 行 获得 传递 进来 的 图 像 对 象 , 并 在 其 中 添加 新 的 outImage 属性 。 


的 zolloverInit() 函 数 传递 给 


J: 这 个 函数 将 两 个 新 的 
像 对 象 中 。 新 的 属性 是 outImage ( 鼠标 不 在 图 像 上 时 的 图 像 版 本 ) 和 overImage ( 鼠标 在 
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为 可 以 





























类 型 的 











9. theImage.outImage.src = theImage.src; 


现在 ， 将 新 的 outImage 的 来 源 设 置 为 与 theImage 的 来 源 相 同 。 页 面 上 的 默认 





在 图 像 上 时 看 到 的 图 像 。 


10. theImage.onmouseout = function() { 








this.src = this.outImage.src; 


} 


属性 ， 而 且 属 性 本 身 也 是 对 象 ， 所 以 这 里 的 操作 是 将 一 个 
象 的 圆 括号 是 可 选 的 , 但 这 是 良好 的 做 法 。 如 果 需 要 的 话 , 可 以 通过 传递 参数 设置 计 
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像 对 象 添加 到 图 





性 添加 到 传递 给 它 
到 像 上 














图 像 对 象 ， 所 以 被 创建 后 ， 就 可 以 添加 它们 的 
图 像 的 src, overImage 的 src 值 是 根据 原 





图 像 的 id 属性 计算 出 


的 图 像 。 





在 对 象 上 添加 任何 
像 中 。 新 的 图 像 对 

















图 像 对 象 的 属性 。 





图 像 也 就 是 鼠标 不 
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第 一 行 开始 定义 一 个 匿名 函数 oo 数 )。 可 以 给 它 指定 一 个 名 称 ( 比如 
rollout ), 但 是 因为 它 只 有 一 行 代 码 ， 所 以 不 需要 命名 。 

在 这 里 ,我们 告诉 浏览 器 当 用 户 i MAE 当 发 生 这 种 情况 时 ,希望 把 
图 像 源 恢复 为 最 初 的 值 ， 也 就 是 图 像 的 outImage 版 本 。 


11. theImage.overImage = new Image(); 

















theImage.overImage.src = "images/" + theImage.id + "_on.gif"; 
在 第 一 行 中 ， 创 建 一 个 新 的 图 像 对 象 ， 它 将 包含 图 像 的 overlmage 版 本 。 第 二 行 设 置 overImage 
的 来 源 。 它 将 "images/" 和 图 像 的 id (在 脚本 4-3 中 ,我 们 看 到 这 些 id 是 button 和 button2 ) 拼接 起 
来 ， 再 加 上 "on.gif"， 从 而 在 运行 时 构造 出 源 文件 名 。 


12. theImage.onmouseover = function() { 




















this.src = this.overImage.src; 


} 
这 是 另 一 个 匿名 函数 。 它 告诉 浏览 器 ， 当 用 户 将 鼠标 移动 到 图 像 上 上 时， 应 该 把 当前 图 像 的 源 重 新 
设置 为 overImage 版 本 ， e 4-3 和 图 4-4. 



































Firefo = | Firefox * | ke ok 
A More Effective Rollov ud A More Effective Rollover Lt 
dropbom : | 8 P+ Q- ff BE € @ https! /dl. dropboms: sercont "加 eLO RADD 
mm Button 
486/ jsvos chü4/nextl html https-//di.dropboxusercontent.com/u/2127486/)svqs9 chÜ4/next2. html 
4-3 也 可 以 在 同一 页 面 上 建立 多 个 翻转 需 图 4-4 移动 到 第 二 个 翻转 器 上 
V 提示 











O 在 为 翻转 器 准备 图 像 时 ， 要 确保 所 有 GIF 图 像 或 者 PNG 图 像 都 是 不 透明 的 。 如 果 它 们 是 透明 
的 ， 那 么 会 透 过 透明 的 图 像 看 到 被 替换 掉 的 图 像 ， 这 不 是 我 们 需要 的 效果 。 
O 原 图 像 和 替换 图 像 的 尺寸 应 该 相同 。 否则 , 一 些 浏览 带 会 蔡 你 重新 设置 尺寸 , 而 调整 后 的 结 
可 能 不 理想 。 

O 在 前 面 的 示例 中 ， 当 把 鼠标 移动 到 链接 上 时 ， 翻转 带 会 发 挥 作用 。 在 这 里 ， 当 把 鼠标 移动 到 图 
像 上 时 ， ee i 也 就 是 说 ，onmouseover 和 onmouseout 现在 附 在 图 像 上 ， 而 不 是 
链接 。 尽 管 这 两 种 方法 往往 产生 同样 的 效果 ,但 是 有 一 个 大 的 差异 : 一 些 比较 老式 的 浏览 
( Netane 4 及 更 早 的 版 本 , IE 3 及 更 早 的 版 本 ) 在 img 标签 上 不 支持 onmouseover 和 onmouseout, 

O 你 可 能 认为 , 因为 HTML 页 面 上 的 所 有 标签 都 是 小 写 的 , 所 以 tagName 应 该 与 小 写 的 a 进行 比 

较 。 但 这 不 对 ，tagName 总 是 返回 大 写 的 值 。 

O 编写 翻转 器 的 方式 有 很 多 种 ， 我 们 喜欢 使 用 这 个 因为 它 很 灵活 : 向 相关 HTML 页 面 添加 图 像 

或 者 从 页 面 删除 图 像 都 不 需要 改写 代码 。 
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4.3 构建 三 状态 翻转 器 
三 状态 翻转 器 就 是 能 够 显示 图 像 的 3 个 版 本 -一 一 | 


的 翻转 器 。 除 了 原始 图 像 和 当 用 户 将 鼠标 移动 到 € 9 [amond i re- coe] & Q- * Be 
图 像 上 时 显示 的 图 像 之 外 , 图 像 还 有 第 三 个 版 本 ， 
这 个 版 本 在 按钮 本 身 被 单 击 时 显示 ， 见 图 4-5。 

IAS 4-5 (HTML 文件 ) 看 起 来 几乎 与 前 面 的 
脚本 4-3 完全 相同 。 实 际 上 ， 只 是 文档 的 标题 和 
调用 的 外 部 JavaScript 文件 名 有 差异 。 这 正 说 明了 oo 
将 所 有 JavaScript 放 进 外 部 文件 中 是 多 么 有 意义 。 图 4-5 当 单 击 按钮 时 ， 显 示 第 三 个 图 像 (在 这 种 灰 



































nk com/u/2127486/povqsS ch4/nestl, html 























你 可 以 在 页 面 中 增加 功能 ， 而 不 需要 修改 HTML 度 图 中 很 难看 到 这 种 效果 ， 在 本 书 的 配套 
页 面 。 Web 站 点 上 可 以 看 到 完整 的 效果 ) 


脚本 4-5 由 于 将 JavaScript 放 在 外 部 文件 中 ， 三 状态 翻转 器 的 HTML 实质 上 与 两 状态 翻转 带 相 同 


<!DOCTYPE htm]> 
<html> 
<head> 
<title>Three-state Rollovers</title> 
<script src="script03.js"></script> 
<link rel="stylesheet" href= "script01.css"> 
</head> 
<body> 
«a href-"nexti.html"»«img src="images/button1_off.gif" alt-"buttoni" id="button1"></a>&nbsp; &nbsp; 
«a href-"next2.html"»«img src= "images/button2 off.gif" alt-"button2" id="button2"></a> 
«/body» 
«/html» 


在 脚本 4-6 ( 外 部 JavaScript 文件 ) 中 ,与 脚本 4-4 相 比 只 有 几 处 修改 。 我 们 不 必 再 次 逐 行 研究 束 
个 脚本 ， 只 需 关注 修改 的 地 方 。 我 们 讨论 的 脚本 部 分 以 粗 体 显示 。 


脚本 4-6 这 个 脚本 可 以 产生 三 状态 翻转 带 


window.onload = rolloverInit; 











function rolloverInit() { 
for (var i=0; i<document.images.length;i++) { 
if (document.images[i].parentNode.tagName == "A") { 
setupRollover(document.images[i]); 
} 


} 
} 


function setupRollover(theImage) { 
theImage.outImage = new Image(); 
theImage.outImage.src = theImage.src; 
theImage.onmouseout = function() { 
this.src = this.outImage.src; 


} 


theImage.clickImage = new Image(); 
theImage.clickImage.src = "images/" + theImage.id + " click.gif"; 
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theImage.onclick = function() { 
this.src = this.clickImage.src; 


} 


theImage.overImage = new Image(); 
theImage.overImage.src = "images/" + thelmage.id + " on.gif"; 
theImage.onmouseover = function() { 

this.src = this.overImage.src; 











1. theImage.clickImage = new Image(); 
thelmage.clickImage.src = "images/" + theImage.id + " click.gif"; 

在 setupRollover() rit, 我 们 需要 添加 第 三 个 图 像 属性 ， 它 用 于 单 击 状态 。 在 第 一 行 中 , 我们 
创建 一 个 新 的 图 像 对 象 ， 它 将 包含 图 像 的 clickImage 版 本 。 第 二 行 设置 clickImage 的 来 源 。 它 将 
"images/" 和 图 像 的 id 拼接 起 来 ， 再 加 上 "click.gif"， 从 而 在 运行 时 构造 出 源 文 件 名 。 

2. theImage.onclick = function() { 

















this.src = this.clickImage.src; 
} 
这 一 行 告诉 浏览 器 ， 当 用 户 在 图 像 上 单 击 鼠标 时 ， 应 该 做 什么 。 在 这 种 情况 下 ， 将 图 像 的 来 源 设 
置 为 图 像 的 clickImage 版 本 。 
V 提示 
口 如 果 你 想 在 自己 的 网 站 应 用 功能 类 似 的 脚本 ，7.7 节 的 脚本 7-9 给 出 了 较 完 整 的 版 本 ，13.8 49 
的 脚本 13-19 是 最 终 版 本 。 


4.4 ”由 链接 触发 翻转 器 
在 前 面 的 示例 中 ， 用 户 都 是 通过 将 鼠标 移动 到 图 像 上 来 触发 翻转 器 。 但 是 ， 也 可 以 让 翻转 器 在 用 


户 将 鼠标 指向 文本 链接 时 翻转 ， 如 图 4-6 和 图 4-7 所 示 。 这 个 HTML 页 面 非常 简单 ， 只 有 一 个 链接 和 
一 个 图 像 ， 见 脚本 4-7。 我 们 将 前 面 示例 中 使 用 的 脚本 修改 为 脚本 4-8 这 样 ， 从 而 实现 这 个 翻转 器 。 


ce) x cii x 
eo (B https.//d.dropbo.. JO ~ & C || E Link Rollover eo (B https.//d.dropbo.. O ~ @ C || E Link Rollover 


Next page Next page 


=> = 


https//dl.dropboxusercontent.com/u/2127486/5svqs9/chO4/next.html ) 










































































C————— Há——— ——— 


ť—— ———c—— —— —J 
4-6 ”文本 链接 是 这 个 翻转 器 的 触发 元 素 4-7” 当 用 户 将 鼠标 指向 链接 时 , 下 面 的 图 像 会 发 生变 化 
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脚本 4-7 这 个 脚本 显示 由 文本 链接 触发 的 翻转 带 的 HTML 


<!DOCTYPE html> 
<html> 
<head> 
<title>Link Rollover</title> 
<script src="script04.js"></script> 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<h1><a href-"next.html" id-"arrow"»Next page</a></h1> 
<img src-"images/arrow off.gif" id-"arrowImg" alt="arrow"> 
«/body» 
«/html» 


脚本 4-8 这 里 是 由 文本 链接 触发 的 翻转 带 的 JavaScript 


window.onload = rolloverInit; 


function rolloverInit() { 
for (var i=0; i«document.links.length; i++) { 
var linkObj = document.links[i]; 
if (linkObj.id) { 
var imgObj = document.getElementById(linkObj.id + "Img"); 
if (imgObj) { 
setupRollover(linkObj,img0bj); 


) 


function setupRollover(theLink,theImage) { 
theLink.imgToChange = theImage; 
theLink.onmouseout = function() { 
this.imgToChange.src = this.outImage.src; 


theLink.onmouseover = function() { 
this.imgToChange.src = this.overImage.src; 


} 


theLink.outImage = new Image(); 
theLink.outImage.src = theImage.src; 


theLink.overImage = new Image(); 
theLink.overImage.src = "images/" + theLink.id + 


" 


_on.gif"; 


} 


r^ 由 链接 触发 翻转 器 








1. function rolloverInit() { 
for (var i=0; i«document.links.length; i++) { 


首先 开始 rolloverInit() 隐 数 ， 然 后 开始 一 个 循环 ， 这 与 本 章 前 面 的 示例 很 相似 。 但 是 ， 以 前 寻 








找 的 是 图 像 (document.images.length )， 而 这 里 要 寻找 链接 ( document.1inks. 
先 将 计数 器 变量 i 设置 为 0。 在 每 次 迭代 中 ， 如 果 i 的 值 小 于 文档 中 的 链接 数量 ， 就 将 i 递增 1。 











2.var linkObj = document.links[i]; 
我 们 创建 LinkObj 变量 并 将 它 设 置 为 当前 链接 。 

















length )。 这 个 循环 首 
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3. if (linkObj.id) { 
var imgObj = document.getElementById(linkObj.id + "Img"); 
如 果 linkobj 有 id， 就 检查 页 面 上 是 否 有 对 应 的 图 像 元 素 ， 这 个 元 素 的 id 是 linkobj 的 id 加 上 
Img。 如 果 有 这 样 的 元 素 ， 就 将 它 放 进 新 变量 img0bj 中 。 
4. if (imgObj) { 
setupRollover(linkObj, imgObj); 
如 果 img0bj 存在 ， 那 么 调用 setupRollover() 函 数 ， 并 将 链接 对 象 和 图 像 对 象 传递 给 它 。 
5. function setupRollover(theLink, theImage) { 
theLink.imgToChange = theImage; 
在 setupRollover() 中 , 首先 利用 步 又 4 中 传递 给 它 的 链接 和 图 像 参数 , 在 链接 对 象 中 添加 一 个 新 
的 属性 imgToChange. JavaScript 需要 知道 当 鼠 标 停留 在 链接 上 时 要 改变 哪个 图 像 , imgToChange 用 来 存 
储 这 一 信息 。 
6. theLink.onmouseout = function() { 
this.imgToChange.src = this.outImage.src; 
} 


theLink.onmouseover = function() { 


























this.imgToChange.src = this.overImage.src; 

} 

mouseOver 和 mouseOut 被 触发 时 ， 与 本 章 前 面 的 示例 稍 有 不 同 : 现在 重新 设置 this. imgToChange. 

src， 而 不 是 设置 this.src 本 身 。 

v 提示 

口 可 以 使 用 这 种 技术 向 用 户 提供 预览 , 让 他 们 提前 了 解 单 击 所 指向 的 链接 之 后 将 看 到 的 内 容 。 例 
如 , 假设 有 一 个 旅游 站 点 描述 苏格兰 、 塔 希 提 岛 和 克利 夫 兰 等 地 的 风光 。 在 页 面 的 左边 是 一 栏 
文本 链接 ,每 个 旅游 目的 地 有 一 个 链接 ; 在 右边 是 一 个 预览 区 域 ， 其 中 显示 一 个 图 像 。 当 用 户 
将 鼠标 指向 一 个 目的 地 名 称 时 , 在 预览 区 域 中 显示 此 地 的 一 张 图 片 。 单 击 链接 就 会 将 用 户 带 入 
一 个 新 页 面 ， 这 里 详细 描述 此 地 的 著名 旅游 景点 。 


4.5 让 多 个 链接 触发 一 个 翻转 器 


到 目前 为 止 ， 你 已 经 看 到 了 在 将 鼠标 移动 到 某 一 区 域 时 如 何 触发 翻转 器 效果 。 但 是 ， 还 可 以 让 几 
个 不 同 的 图 像 触 发 同一 个 翻转 器 。 如 果 需 要 对 多 个 图 像 进行 说 明 ， 这 种 技术 就 非常 有 用 。 将 鼠标 移动 
到 其 中 一 个 图 像 上 时 ， 就 会 显示 对 这 个 图 像 的 描述 。 在 这 个 示例 中 ， 我 们 对 Leonardo da Vinci ( 达 芬 
奇 ) 的 三 项 发 明 的 图 像 应 用 这 种 技术 。 当 用 户 将 鼠标 移动 到 其 中 一 个 图 像 上 时 ， 对 这 个 图 像 的 描述 就 
会 出 现在 文本 框 中 。 描 述 本 身 是 另 一 个 图 像 。 更 精确 地 说 ， 它 是 三 个 图 像 ， 对 于 三 项 发 明 各 有 一 个 图 
像 。 图 4-8 显示 脚本 4-9 (HTML )、 脚 本 4-10 (CSS ) 和 脚本 4-11 (JavaScript) 的 效果 。 与 本 书 中 的 
大 多 数 脚 本 一 样 ， 它 是 在 前 面 示例 的 基础 上 构建 的 ， 所 以 我 们 只 解释 新 概念 。 脚 本 4-8 与 脚本 4-11 相 
比 只 有 几 行 代码 不 一 样 。 
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图 4-8 这 个 页 面 上 有 3 PACHA, —T iras. TOKAI TEL. 2 
用 户 将 鼠标 移动 到 图 像 上 时 ， 对 它 的 描述 就 会 出 现在 达 芬 奇 的 画像 下 面 


脚本 4-9 注意 ， 这 个 页 面 上 的 链接 和 图 像 都 有 唯一 的 id 


<!DOCTYPE html» 
<html> 
<head> 
<title>Multiple Links, Single Rollover </title> 
<script src-"script05.js"»«/script» 
<link rel="stylesheet" href="script02.css"> 
</head> 
<body> 
<div id="captionDiv"> 
<img src="images/DaVinci. jpg" width="144" height="219" alt="DaVinci"> 
<img src-"images/bg.gif" id-"captionField" alt="Text Field"> 
</div> 
<div id="inventionDiv"> 
<img src-"images/leoText.gif" id-"heading" alt-"Leonardo's Inventions"> 
«a href-"flyPage.html" class- "captionField" id-"flyer"»«img src- "images/flyer.gif" width-"293" 
^height-"165" alt-"Flying Machine" id-"flyerImg"»«/a» 
«a href-"tankPage.html" class= "captionField" id="tank"><img src-"images/tank.gif" width="325" 
^height-"92" alt-"Tank" id="tankImg"></a> 
«a href-"heliPage.html" class-"captionField" id-"helicopter"»«img src-"images/helicopter.gif" 
"width-"224" height-"160" alt-"Helicopter" id="helicopterImg"></a> 
</div> 
</body> 
</html> 


脚本 4-10 在 这 个 CSS 文件 中 ,我 们 定义 在 HTML 中 引用 的 类 


body { 
background-color: #EC9; 
} 























img { 
border-width: 0; 
} 


#captionDiv { 
float: right; 
width: 210px; 
margin: auto 50px; 
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#captionField { 
margin: 20px auto; 
width: 208px; 
height: 27px; 

} 


#inventionDiv { 
width: 375px; 
margin-left: 20px; 





} 

#heading { 
margin-bottom: 20px; 
width: 375px; 
height: 26px; 

} 


脚本 4-11 这 个 脚本 演示 如 何 使 用 多 个 链接 触发 一 个 翻转 器 


window.onload = rolloverInit; 


function rolloverInit() { 
for (var i=0; i<document.links.length; i++) { 
var linkObj = document. links[i]; 
if (linkObj.className) { 
var imgObj = document.getElementById(linkObj.className); 
if (imgObj) { 
setupRollover(linkObj, img0bj) ; 
} 
} 
} 
} 


function setupRollover(theLink,textImage) { 
theLink.imgToChange = textImage; 
theLink.onmouseout = function() { 
this.imgToChange.src = this.outImage.src; 


} 
theLink.onmouseover = function() { 
this.imgToChange.src = this.overImage.src; 


} 


theLink.outImage = new Image(); 
theLink.outImage.src = textImage.src; 


theLink.overImage = new Image(); 
theLink.overImage.src = "images/" + theLink.id + "Text.gif"; 


} 
1. if (linkObj.className) { 
var imgObj = document.getElementById(linkObj.className); 
无 法 使 用 翻转 图 像 的 id 计算 出 改变 过 的 图 像 的 id, 这 是 因为 id 必须 是 唯一 的 ， 而 所 有 翻转 图 像 
必须 为 改变 过 的 图 像 的 目的 地 提供 同样 的 值 。 因 此 ， 我 们 要 使 用 class 属性 ( 因为 多 个 页 面 元 素 可 以 
共享 同一 个 class). 在 这 一 行 上 ， 寻 找 链接 对 象 的 className. 
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2. function setupRollover(theLink, textImage) { 
theLink.imgToChange = textImage; 
我 们 将 当前 链接 对 象 (theLink ) 和 图 像 对 象 ( 我 们 称 之 为 textImage ) 传递 给 setupRollover() 
函数 。 注 意 ， 在 传递 这 些 对 象 ( 也 可 以 称 为 变量 ) 时 ， 分 别 将 它们 称 为 link0bj 和 img0bj。 
脚本 其 余部 分 的 工作 方式 与 本 章 前 面 的 示例 相同 。 


4.6 ”处 理 多 个 翻转 器 


如 果 和 希望 触发 翻转 器 的 图 像 本 身 也 是 一 个 翻转 回 ， 那 么 应 该 怎么 办 ? 图 4-9 在 前 一 个 示例 的 基础 
上 进行 了 改进 ,演示 如 何 添 加 这 个 特性 。 在 将 鼠标 移动 到 一 个 自 创 图 像 上 时 ,与 前 面 一 样 ， 描 述 图 像 
会 出 现 , 但 是 现在 自 创 图 像 本 身 也 会 切换 为 男 一 个 带 阴影 的 图 像 。 这 会 向 用 户 提 供 视觉 反馈 ,明确 地 
指出 鼠标 当前 指向 的 元 素 ( 鼠标 指针 本 身 的 指示 效果 可 能 不 够 明显 ) 脚本 4-12 是 HTML 页 面 (除了 标 
题 和 调用 的 外 部 JavaScript 文件 名 之 外 ,没有 变化 )， 脚 本 4-13 显示 了 与 前 面 的 示例 相 比 增加 的 JavaScript 
代码 。 
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图 4-9 在 将 鼠标 移动 到 一 个 图 像 上 时 ， 描 述 会 出 现 ， 而 且 图 像 本 身 会 加 上 阴影 
脚本 4-12 除了 标题 和 外 部 脚本 的 引用 之 外 ， 这 个 HTML 与 脚本 4-9 相同 


<!DOCTYPE html> 
<html> 
<head> 
<title>Multiple Links, Multiple Rollovers</title> 
<script src="script06.js"></script> 
<link rel="stylesheet" href="script02.css"> 
</head> 
<body> 
<div id="captionDiv"> 
<img src="images/DaVinci. jpg" width="144" height="219" alt="DaVinci"> 
<img src-"images/bg.gif" id-"captionField" alt="Text Field"> 
</div> 
<div id="inventionDiv"> 
<img src-"images/leoText.gif" id-"heading" alt-"Leonardo's Inventions"> 
«a href-"flyPage.html" class-"captionField" id-"flyer"»«img src-"images/flyer.gif" width="293" 
^height-"165" alt-"Flying Machine" id-"flyerImg"»«/a» 
«a href-"tankPage.html" class-"captionField" id="tank"><img src-"images/tank.gif" width="325" 
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*height="92" alt="Tank" id="tankImg"></a> 
«a href-"heliPage.html" class-"captionField" id="helicopter"><img src-"images/helicopter.gif" 
'width-"224" height-"160" alt-"Helicopter" id="helicopterImg"></a> 
</div> 
</body> 
</html> 


脚本 4-13 jx T LAS Ach RA lp at 


window.onload = rolloverInit; 


function rolloverInit() { 
for (var i=0; i«document.links.length; i++) { 

var linkObj = document.links[i]; 

if (linkObj.className) { 
var imgObj = document.getElementById(linkObj.className); 
if (imgObj) { 

setupRollover(linkObj, img0bj) ; 

} 





} 
} 
} 


function setupRollover(thisLink,textImage) { 
theLink.imgToChange = new Array; 
theLink.outImage = new Array; 
theLink.overImage = new Array; 


theLink.imgToChange[0] = textImage; 
theLink.onmouseout = rollOut; 
theLink.onmouseover = rollOver; 


theLink.outImage[0] = new Image(); 
theLink.outImage[0].src = textImage.src; 


theLink.overImage[0] = new Image(); 
theLink.overImage[0].src = "images/" + theLink.id + "Text.gif"; 


var rolloverObj = document.getElementById(theLink.id + "Img"); 
if (rolloverObj) { 
theLink.imgToChange[1] = rollover0bj; 


theLink.outImage[1] = new Image(); 
theLink.outImage[1].src = rolloverObj.src; 


theLink.overImage[1] = new Image(); 
theLink.overImage[1].src = "images/" + theLink.id + 


_on. gif"; 
} 


function rollOver() { 
for (var i=0; i«this.imgToChange.length; i++) { 
this.imgToChange[i].src = this.overImage[i].src; 


} 


function rollout() { 
for (var i=0; i«this.imgToChange.length; i++) { 
this. imgToChange[i].src = this.outImage[i].src; 


} 
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p^ 处 理 多 个 翻转 顺 











1. theLink.imgToChange = new Array; 
theLink.outImage = new Array; 
theLink.overImage = new Array; 
添加 这 些 行 ， 是 因为 这 个 脚本 有 更 多 的 图 像 需 要 处 理 ( 每 个 翻转 器 有 两 个 图 像 )。 在 每 一 行 中 ， 
我 们 为 theLink 创建 一 个 新 属性 ， 每 个 属性 都 是 一 个 数组 。 
2. theLink.imgToChange[0] = textImage; 
在 前 一 节 中 ，imgToChange 是 一 个 图 像 ， 但 是 在 这 里 ， 它 是 一 个 包含 图 像 的 数组 。 在 这 一 行 中 ， 
textImage 被 存储 在 imgToChange 的 第 一 个 元 素 中 。 
3. theLink.outImage[0] = new Image(); 












































theLink.outImage[0].src = textImage.src; 
与 前 面 一 样 ， 需 要 存储 图 像 的 outImage 版 本 ， 但 是 这 一 次 它 被 存储 在 outImage 数组 的 第 一 个 
素 中 。 


4. thisLink.overImage[0] = new Image(); 





c 


thisLink.overImage[0].src = "images/" + theLink.id + "Text.gif"; 
同样 ， 计 算出 图 像 的 overImage 版 本 的 文件 名 并 将 其 存储 在 overImage 数组 的 第 一 个 元 素 中 。 
5. var rolloverObj = document.getElementById(theLink.id + "Img"); 
if (rolloverObj) { 
现在 ， 需 要 查 明 这 个 翻转 器 是 否 将 触发 多 个 图 像 ， 而 不 只 是 一 个 图 像 。 如 果 是 这 种 情况 ，HTML 
页 面 上 就 会 有 一 个 对 应 的 元 素 ， 它 的 id 是 当前 链接 的 id 加 上 Img。 也 就 是 说 ， 如 果 正 在 操作 flyer 
链接 ， 就 检查 页 面 上 是 否 有 flyerImg 元 素 。 如 果 有 ， 就 将 它 保存 在 rolloverdbj 中 ,并 且 应 该 执行 下 
面 三 步 。 
6. theLink.imgToChange[1] = rollover0bj; 
现在 ， 按 照 前 面 设置 imgToChange[0] 的 方式 ,将 imgToChange[1] (数组 中 的 第 二 个 元 素 ) 设置 为 
新 的 rollover0bj。 当 触发 onmouseout 和 onmouseover 事件 处 理 程序 时 ， 两 个 图 像 将 被 替换 为 它们 的 
替代 版 本 ， 我 们 将 在 稍 后 看 到 这 一 点 。 
7. theLink.outImage[1] = new Image(); 










































































theLink.outImage[1].src = rollover0bj.src; 
这 将 out Image 数组 的 第 二 个 元 素 设置 为 图 像 的 out Image 版 本 。 
8. theLink.overImage[1] = new Image(); 


theLink.overImage[1].src = "images/" + theLink.id + " on.gif"; 
这 里 计算 出 图 像 的 over Image 版 本 的 文件 名 并 将 其 存储 在 over Image 数组 的 第 二 个 元 素 中 。 
如 果 由 于 某 种 原因 ,在 同一 翻转 器 执行 期 间 还 需要 改变 第 三 个 图 像 ， 那 么 应 该 对 第 三 个 图 像 对 象 
重复 步骤 6~8。 
9. for (var i-0; i«this.imgToChange.length; i++) { 






































this.imgToChange[i].src = this.overImage[i].src; 


} 
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这 有 段 代码 在 roll0ver() 函 数 中 , 这 里 是 对 图 像 进行 切换 的 地 方 。 因为 可 能 要 改变 一 个 或 多 个 图 像 ， 
所 以 首先 需要 了 解 已 经 存储 了 多 少 个 图 像 ， 也 就 是 this.imgToChange.length 的 值 。 在 这 个 示例 中 ， 
这 个 值 是 2， 因 为 有 两 个 图 像 需 要 改变 。 然 后 进行 两 次 迭代 ， 将 imgToChange[0] 和 imgToChange[1] 的 
来 源 设 置 为 对 应 的 overImage 值 。 

10. for (var i-0; i«this.imgToChange.length; i++) { 

















this.imgToChange[i].src = this.outImage[i].src; 
) 
这 段 代 码 在 roll0ut() 函 数 中 ， 它 在 本 质 上 与 前 一 步 中 的 代码 相同 ， 唯 一 的 差异 是 将 这 些 图 像 设 

置 为 outImage 版 本 的 来 源 值 。 
v 提示 
口 一 定 要 记 住 ， 翻 转 的 每 个 图 像 必须 具有 唯一 的 id。 
O 如 果 想 让 页 面 上 的 一 些 链接 触发 多 个 翻转 锅 ， 而 其 他 链接 只 是 单独 的 翻转 咒 ， 那 么 应 该 怎么 

Jk? 没 问 题 ， 甚 至 不 需要 修改 JavaScript。 只 要 步骤 5 中 的 检查 没有 在 页 面 上 找到 替代 id, sk 

不 会 存储 第 二 个 元 素 ，roll0ver() 和 roll0ut() 中 的 循环 只 使 用 初始 图 像 。 


4.7 ”创建 循环 的 广告 条 


在 Web 上 冲浪 时 ， 常 常会 见 到 定期 在 图 像 之 间 切 换 的 广告 条 。 其 中 一 部 分 是 动画 GIF 文件 ， 这 
种 GIF 文件 包含 许多 帧 连续 播放 的 图 像 ， 其 他 的 是 Flash 动画 。 如 果 希 望 页 面 循环 显示 许多 GIF (无 
论 是 否 是 动画 )， 那 么 可 以 使 用 JavaScript 来 实现 ， 就 像 脚本 4-15 中 那样 。 这 个 示例 使 用 3 个 GIF 并 
重复 地 循环 显示 它们 ， 如 图 4-10、 图 4-11 和 图 4-12 所 示 。HTML 页 面 见 脚本 4-14。 


脚本 4-14 这 个 HTML 页 面 在 循环 的 广告 条 中 加 载 第 一 个 图 像 ， 其 他 工作 由 JavaScript 处 理 


<!DOCTYPE html» 
<html> 
<head> 
<title>Cycling Banner</title> 
«script src="script07.js"></script> 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<div class="centered"> 
<img src-"images/readingi.gif" id-"adBanner" alt="Ad Banner"> 
</div> 
</body> 
</html> 


脚本 4-15 ”可 以 使 用 JavaScript 在 广告 条 中 循环 显示 图 像 


window.onload = rotate; 































































































var theAd = 0; 
var adImages = new Array("images/reading1.gif", "images/reading2.gif", "images/reading3.gif"); 


function rotate() { 
theAd++; 
if (theAd == adImages.length) { 
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theAd = 0; 
document. getElementById("adBanner").src = adImages[theAd]; 


setTimeout(rotate, 3 * 1000); 
































} 
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图 4-12 ”最 后 一 个 图 像 。 加 载 页 面 并 且 广 告 条 开始 循环 
之 后 ， 动 画 会 一 直 运行 ， 不 需要 用 户 的 干预 









































1. var theAd = 0; 
var adImages = new Array("images/reading1.gif", "images/reading2.gif", "images/reading3.gif"); 

脚本 首先 创建 变量 theAd， 它 在 这 段 代码 中 被 设置 了 初始 值 。 第 二 行 代码 创建 一 个 名 为 adImages 
的 新 数组 ， 它 包含 构成 循环 广告 条 的 3 个 GIF 文件 的 文件 名 。 

2. function rotate() { 

先 建立 一 个 称 为 rotate() 的 新 隐 数 。 

3. theAd++; 

这 一 行将 theAd 的 值 加 1. 

4.if (theAd == adImages.length) { 

theAd = 0; 

这 一 行 代码 检查 thead 的 值 是 否 等 于 adImages 数组 中 成 员 的 数量 ， 如 果 等 于 ， 就 将 thead 的 值 设 

置 为 0。 
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5. document.getElementById("adBanner").src = adImages[theAd] ; 
页 面 上 循环 显示 的 图 像 的 id 是 adBanner。 在 脚本 4-14 中 可 以 看 到 ，img 标签 中 定义 了 这 个 id. 
这 行 代码 指出 ，adBanner 图 像 的 来 源 在 adImages 数组 中 , 而且 thead 变量 的 值 决定 浏 览 器 当前 应 该 使 
用 3 个 GIF 中 的 哪 一 个 。 
6. setTimeout(rotate, 3 * 1000); 
这 一 行 告诉 脚本 每 隔 多 长 时 间 改 变 广 告 条 中 的 GIF。 可 以 使 用 内 置 的 JavaScript 命令 setTimeout 
指定 一 个 操作 应 该 间隔 多 长 时 间 执 行 一 次 〈 时 间 的 单位 是 毫秒 )。 在 这 个 示例 中 ,每 3000 毫秒 (BN 3 
秒 ) 调用 一 次 rotate() 函 数 ， 所 以 广告 条 中 的 GIF 每 3 秒 改 变 一 次 。 
V 提示 
O 你 可 能 会 问 ,为 什么 要 用 JavaScript 实现 循环 广告 条 ,创建 一 个 动画 GIF 不 就 行 了 吗 ? 原因 之 
一 是 , 这 使 你 能 够 在 广告 条 中 使 用 JPEG 或 PNG, 因此 图 像 的 质量 更 好 。 通 过 使 用 这 些 高 质量 
的 图 像 ， 可 以 在 广告 条 中 显示 照片 。 

口 与 本 章 中 前 面 的 示例 不 同 ,这 里 的 图 像 并 不 预先 缓存 。 每 个 图 像 在 第 一 次 显示 时 从 服务 器 下 载 。 
这 是 因为 在 adImages 数组 中 可 能 有 任意 数量 的 图 像 ， 如 果 用 户 在 这 个 页 面 上 停留 的 时 间 很 短 ， 
只 会 看 到 其 中 的 两 三 个 图 像 ， 那 么 强迫 他 们 下 载 大 量 图 像 ( 比如 100 个 ) 是 不 妥当 的 。 


4.8 在 循环 广告 条 中 添加 链接 


告 条 常常 用 来 做 广告 ， 而 且 常 常 希望 在 广告 条 中 建立 链接 ， 让 访问 者 可 以 通过 单 击 链接 进入 与 
广告 相关 的 站 点 。 脚 本 4-16 显示 的 HTML 页 面 与 前 一 个 示例 相 比 只 有 一 点 不 同 : 它 在 img 标签 外 边 
添加 了 一 个 链接 。 脚 本 4-17 是 前 一 个 脚本 的 一 个 变 体 。 在 这 个 脚本 中 , 我 们 将 添加 一 个 新 数组 。 这 个 























































































































新 数组 包含 : 击 广 告 条 时 他 们 将 I 目的 地 。 在 这 个 示 , Eat at Joe's 广告 条 会 a 
新 数组 包含 当 用 户 单 击 广告 条 时 他 们 将 转 到 的 目的 地 。 在 这 个 示例 中 ，Eat at Joe’s 广告 条 会 把 用 户 
到 negrino.com, Drink more Java 链接 到 sun.com, Heartburn 链接 到 microsoftcom， 见 图 4-13. 
eoo Cycling Banner with Links P eoo Cycling Banner with Links 
Cycling Banner with Links ‘ea Cycling Banner with Links b 
aja dropboxusercontent.com =| (8- ajm- [se 45 dropboxusercoment comu c| 5- a lm) [sa 
Eat at Joe's | Drink More Java | 
eoo Cycling Banner with Links 
Cycling Banner with Links ls 
4 E dropb "c m B- Q) -) +j f 
Cure Heartburn with 
Bismo-Pepta 

















图 4-13 这 3 个 图 像 都 是 链接 ， 单 击 它们 就 会 进入 三 个 Web 站 点 之 一 
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脚本 4-16 广告 条 所 需 的 HTML 


<!DOCTYPE html» 
<html> 
<head> 
<title>Cycling Banner with Links</title> 
<script src="script08.js"></script> 
<link rel="stylesheet" href="script01.css"> 
</head> 


<body> 
<div class="centered"> 


<a href-"linkPage.html"»«img src="images/banner1.gif" id-"adBanner" alt-"ad banner"></a> 
</div> 


</body> 
</html> 


脚本 4-17 这 个 脚本 演示 如 何 将 循环 广告 条 转换 为 真正 可 单 击 的 广告 条 
window.onload = initBannerLink; 


var theAd = 0; 
var adURL = new Array("negrino.com","sun.com","microsoft.com"); 
var adImages = new Array("images/banneri.gif","images/banner2.gif","images/banner3.gif"); 


function initBannerLink() { 
if (document .getElementById("adBanner").parentNode.tagName == "A") { 
document .getElementById("adBanner").parentNode.onclick = newLocation; 
} 


rotate(); 


function newLocation() { 


document. location.href = "http://www." + adURL[theAd]; 
return false; 


} 
function rotate() { 
theAd++; 
if (theAd == adImages.length) { 
theAd = 0; 
} 
document .getElementById("adBanner").src = adImages[theAd]; 
setTimeout(rotate, 3 * 1000); 
} 


> 在 循环 广告 条 中 添加 链接 








1. window.onload = initBannerLink; 

当 窗 口 完成 加 载 时 ， 触 发 initBannerLink() eA. 

2. if (document.getElementById("adBanner").parentNode.tagName == "A") { 
document .getElementById("adBanner").parentNode.onclick = newLocation; 








} 
rotate(); 





这 段 代 码 在 initBannerLink() Pa, 它 首先 检查 adBanner 对 象 是 否 包 围 在 链接 标签 中 。 如 细 
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这 样 ， 那 么 当 单 击 链接 时 ， 将 调用 newLocation() 函 数 。 最 后 ， 调 用 rotate()PAZ. 

3. document.location.href = "http://www." + adURL[theAd]; 

return false; 

这 上段 代码 在 新 图 数 newLocation 中 ， 将 document.location.href WA ( 换 名 话说， 就 是 当前 文档 
窗口 ) 设置 为 文本 字符 串 http://www. (注意 点 号 ) 加 上 adURL 的 值 。 因 为 adURL 是 一 个 数组 ， 所 以 需 
要 指定 数组 的 一 个 成 员 。 成 员 的 编号 存储 在 thead 中 ， 产 生 的 字符 串 可 以 是 三 个 链接 之 一 ( 取决 于 用 
户 何 时 进行 单 击 )。 最 后 ， 它 返回 false， 告 诉 浏览 器 不 应 再 加 载 这 个 href。 如 果 不 这 样 做 ,浏览 器 就 
会 加 载 这 个 URL 两 次 。 我 们 已 经 在 JavaScript 中 处 理 了 所 有 工作 ， 所 以 不 需要 再 加 载 href. 

V 提示 

O adURL 数组 中 的 成 员 数 量 必须 与 adImages 数组 相同 ， 这 样 这 个 脚本 才能 正确 地 工作 。 


4.9 建立 循环 式 幻灯 片 


Web 站 点 上 的 幻灯 片 每 次 向 用 户 显示 一 个 图 像 ， 并 且 让 用 户 能 够 控制 显示 图 像 的 进度 ( 既 可 以 向 
前 ,也 可 以 向 后 )。JavaScript 向 用 户 提供 所 需 的 交互 式 控 制 能 力 。 脚 本 4-18 显示 了 必需 的 HTML, 脚 
本 4-19 是 在 页 面 上 添加 幻灯 片 所 需 的 JavaScript. 


脚本 4-18 这 个 HTML 页 面 创建 幻灯 片 


<!DOCTYPE html> 
<html> 
<head> 
<title>Image Slideshow</title> 
<script src="scripto9.js"></script> 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<div class="centered"> 
«hi»Welcome, Robot Overlords!</h1> 
<img src="images/robot1. jpg" id-"myPicture" width="200" height="400" alt-"Slideshow"» 
«h2»«a href-"previous.html" id="prevLink">&lt;&lt; Previous«/a»&nbsp;&nbsp;«a href-"next.html" 
'id-"nextLink"»Next 8gt;8gt;«/a»«/h2» 
«/div» 
«/body» 
</html> 


脚本 4-19 这 个 脚本 构建 一 个 幻灯 片 ， 用 户 可 以 通过 单 击 链接 控制 图 像 的 前 后 切换 


window.onload = initLinks; 
















































































var thePic = 0; 
var myPix = new Array("images/robot1. jpg", "images/robot2. jpg", "images/robot3. jpg"); 


function initLinks() { 
document. getElementById("prevLink").onclick = processPrevious; 
document .getElementById("nextLink").onclick = processNext; 


} 


function processPrevious() { 
if (thePic == 0) { 
thePic = myPix. length; 
} 
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thePic--; 
document. getElementById("myPicture").src = myPix[thePic]; 
return false; 


} 
function processNext() { 
thePic++; 
if (thePic == myPix.length) { 
thePic = 0; 


document. getElementById("myPicture").src = myPix[thePic]; 
return false; 


} 
这 个 脚本 构建 的 幻灯 片 是 循环 式 的 ( wrap around )， 也 就 是 说 ， 如 果 超 过 了 图 像 列表 的 末尾 ， 就 
会 返回 到 开头 ， 反 之 亦 然 。 图 4-14 显示 这 个 幻灯 片 的 效果 。 


XT Tc en] 3 - E 











4 > stps//Budropboxusercontentcom//.@ vy =! = e»c ttps.//di.dropboxusercontent.com/u/.G vy »| 至 ec :tps;//didropboxusercontentcom/./. vy » = 
Welcome, Robot Overlords! Welcome, Robot Overlords! Welcome, Robot Overlords! 


( ) 


x 





<< Previous Next >> << Previous Next >> << Previous Next >> 


C) 
图 4-14 单 击 Previous BY Next 链接 ， 就 会 分 别 调用 processPrevious() 或 processNext () PAA 


> 建立 循环 式 幻 灯 片 















































1. window.onload = initLinks; 
当 和 窗口 完成 加 载 时 ， 触 发 initLinks() PAA. 
2. function initLinks() { 

document .getElementById("prevLink").onclick = processPrevious; 

document.getElementById("nextLink").onclick = processNext; 

} 

这 个 函数 为 Previous 或 Next 链接 设置 onclick 事件 处 理 程序 。 
3. function processPrevious() { 

if (thePic == 0) { 

thePic = myPix. length; 
这 个 函数 使 幻灯 片 向 前 切换 图 像 。 它 首先 检查 thei 是 否 等 于 0. 如 果 是 , 这 个 函数 就 获取 myPix 
数组 中 的 图 像 数 量 。 
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4. thePic--; 
document.getElementById("myPicture").src = myPix[thePic]; 
第 一 行将 thePic 的 值 减 1。 下 一 行将 myPicture 的 src 属性 设置 为 myPix 数组 中 与 thePic 的 当前 
值 对 应 的 元 素 。 
5. thePic++; 
if (thePic == myPix.length) { 
thePic = 0; 
} 
document.getElementById("myPicture").src = myPix[thePic]; 
这 段 代码 在 processNext() 函 数 中 ， 它 使 幻灯 片 向 后 切换 图 像 ， 其 工作 方式 与 processPrevious() 
函数 非常 相似 。 它 首先 将 thePic 的 值 加 1， 然 后 检查 thePic 的 值 是 否 等 于 myPix 数组 中 成 员 的 数量 。 
如 果 是 ， 就 将 thePic 设置 为 0。 下 一 行 设置 myPicture 的 src 属性 。 


4.10 显示 随机 图 像 


如 果 你 的 站 点 包含 大 量 图 形 , 或 者 要 显示 数字 化 艺术 作品 ， 那 么 可 能 希望 在 用 户 进入 站 点 时 从 必 
像 集合 中 随机 选择 要 显示 的 图 像 。 同 样 ，JavaScript 可 以 实现 这 种 功能 ! 脚本 4-20 是 所 需 的 HTML, 
相当 简单 ， 脚 本 4-21 是 JavaScript。 图 4-15 显示 脚本 的 结果 ， 在 这 个 示例 中 图 像 是 三 种 毛 绒 玩 具 (分 
别 是 狮 、 虎 和 能 )。 


脚本 4-20 ”这 个 简单 的 HTML 创建 显示 随机 图 像 的 页 面 


<!DOCTYPE html» 
<html> 
<head> 
<title>Random Image</title> 
<script src="script10.js"></script> 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<img src-"images/spacer.gif" width="305" height="312" id-"myPicture" alt="some image"> 
</body> 
</html> 


脚本 4-21 可 以 用 这 个 脚本 在 页 面 上 显示 随机 图 像 , 它 使 用 JavaScript 的 Math. random 方法 生成 一 个 
随机 数 


window.onload = choosePic; 




































































var myPix = new Array("images/lion. jpg", "images/tiger. jpg", "images/bear. jpg"); 


function choosePic() { 
var randomNum = Math.floor (Math.random() * myPix.length); 
document.getElementById("myPicture").src = myPix[randomNum]; 
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图 4-15 根据 脚本 生成 的 随机 数 的 值 ， 用 户 会 看 到 三 种 毛 绒 玩 具 之 一 


> 显示 随机 图 像 








l. var myPix = new Array("images/lion.jpg", "images/tiger.jpg","images/bear.jpg"); 

与 前 面 一 样 ， 建 立 一 个 包含 三 个 图 像 的 数组 ， 并 且 将 它 赋 值 给 变量 myPix。 

2.var randomNum = Math.floor(Math.random() * myPix.length); 

变量 randomNum 被 设置 为 一 个 数学 表达 式 的 值 。 这 个 表达 式 最 好 是 从 内 向 外 读 。Math.random 生成 
— 0 ~ 1 的 随机 数 ， 然 后 将 这 个 数字 乘 以 mypix.length， 即 数组 中 的 成 员 数 量 (在 这 个 示例 中 是 3 )。 
Math. floor 将 结果 向 下 取 整 ， 这 意味 着 最 终 产 生 0、1 和 2 中 的 一 个 数字 。 

3. document.getElementById("myPicture").src = myPix[randomNum]; 


这 行 代 码 根据 myPix 数组 设置 myPicture 图 像 的 来 源 ， 当 前 采用 的 值 由 randomNum 的 值 决定 。 


4.11 随机 开始 循环 显示 图 像 


如 果 有 许多 图 像 需 要 显示 ,你 可 能 不 希望 在 每 次 加 载 页 面 时 都 从 同样 的 图 像 开 始 显 示 。 脚本 4-22 
是 HIML， 脚 本 4-23 是 JavaScript， 它 组 合 了 前 面 用 于 循环 广告 条 的 代码 和 随机 图 像 的 代码 。 


脚本 4-22 HTML 文件 中 有 一 个 分 隔 线 GIF， 这 是 广告 条 出 现 之 前 的 占 位 图 像 


<!DOCTYPE html» 
<html> 
<head> 
<title>Cycling Random Banner</title> 
<script src-"scripti11.js"»«/script» 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<div class="centered"> 
<img src-"images/spacer.gif" id-"adBanner" alt-"Ad Banner"» 
</div> 
</body> 
</html> 


脚本 4-23 这 个 脚本 可 以 从 一 个 随机 图 像 开 始 循环 显示 图 像 


window.onload = choosePic; 















































var theAd = 0; 
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var adImages = new Array("images/readingi.gif","images/reading2.gif","images/reading3.gif"); 


function choosePic() { 
theAd = Math. floor(Math.random() * adImages. length) ; 
document .getElementById("adBanner").src = adImages[theAd]; 


rotate(); 


function rotate() { 
theAd++; 
if (theAd == adImages.length) { 
theAd = 0; 
} 


document .getElementById("adBanner").src = adImages[theAd]; 


setTimeout(rotate, 3 * 1000); 


} 

> 随机 开始 循环 显示 图 像 

1. var adImages = new Array("images/reading1.gif", "images/reading2.gif", "images/reading3.gif"); 
与 前 面 的 示例 一 样 ， 建 立 一 个 含有 三 个 图 像 的 数组 并 且 将 数组 赋值 给 一 个 变量 。 

2. function rotate() { 

这 个 函数 与 脚本 4-15 中 的 rotate() 函 数 相同 ， 其 工作 方式 的 细节 请 参见 4.7 节 中 的 解释 。 
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男 一 种 文档 窗口 。 
然而 在 过 去 的 几 年 中 ,框架 不 再 流行 ,甚至 从 HTML5 中 完全 移 除 (iframe 除外 )。 因 此 ， 本 章 的 














口 是 最 重要 的 接 











框架 部 分 会 将 重点 集中 在 如 何 通 过 JavaScript 让 iframe 变 得 更 有 用 。 
目前 需要 了 解 的 HTML 知识 见 表 5-1。 


口 元 素 。 不 出 所 料 ，JavaScript 提供 了 很 多 用 来 操纵 窗口 


E 架 类 似 。 这 非常 合理 ， 因 为 框架 仅仅 是 整个 浏览 右 窗 口中 的 














5.1 


架 中 ， 使 你 的 页 画 


表 5-1 目前 需要 了 解 的 HTML 知 识 一 一 框架 
Bm € B 性 意 X 
iframe 内 部 框架 ， 它 显示 在 进行 调用 的 HTML 页 面 中 


防止 页 面 显示 在 框架 中 





别人 可 以 将 你 的 页 面 加 载 进 他 们 站 点 上 的 框 























JavaScript 也 可 以 使 用 这 个 属性 引用 iframe 
iframe 页 面 的 URL 





eoo Try to frame that page! c» 





Gaj D Cel x C8 CL http: / Ly 





i 看 起 来 就 像 是 他 们 提供 的 内 容 。 


在 JavaScript 中 ， 和 窗口 形成 一 个 层次 结构 ， 父 窗口 
处 于 这 个 层次 结构 的 项 层 。 当 别人 “拦截 ”你 的 页 


面 时 ， 他 们 会 迫使 它 成 为 父 窗 

















口 的 子 框架 。 图 5-1 


显示 当 页 面 作为 别人 站 点 的 一 部 分 显示 时 的 效果 。 


可 以 使 用 脚本 防止 页 男 























i 被 拦截 , 并 











日 迫使 页 面 总 是 





单独 显示 在 浏览 器 窗口 中 。 这 需要 两 个 脚本 。 脚 本 


5-1 总 是 应 该 单独 显示 的 HTML 页 面 


H 


























下 一 步 描述 的 JavaScript 文档 。 


， 其 中 包含 调 
H JavaScript 的 <script> 标 签 ;脚本 5-2 是 我 们 将 在 





Here's a Areally important page 
really cool | here that everyone wants 
page I'm |to claim as theirs. 

going to 

pretend I 

wrote 











[ee 
图 5-1 显示 在 别人 框架 中 的 页 面 
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脚本 5-1 这 是 别人 可 能 想 拦截 的 HTML 页 面 


<!DOCTYPE html» 
<html> 
<head> 
<title>Can't be in a frame</title> 
<script src="script01.js"></script> 
</head> 
<body> 
<h1>A really important page here that everyone 
</body> 
</html> 


脚本 5-2 JavaScript 可 以 迫使 页 面 总 是 单独 显示 


if (top.location != self.location) { 
top. location. replace(self. location) ; 


} 
p^ 使 页 面 单独 显示 





wants to claim as theirs.</h1> 








1. if (top.location != self.location) { 


首先 ,检查 当前 页 面 (self) AVAL AE T DUE s et EU WREE, SUM 





需要 作 任 何 处 理 。 
2. top. location.replace(self.location); 


如 果 当 前 页 面 不 在 顶层 , 就 将 顶层 页 面 蔡 换 为 当 











前 eoo Can't be in a frame c 





CD OTST OACI 








页 面 的 位 置 。 这 迫使 当前 窗口 显示 我 们 的 页 面 , 而 且 
显示 我 们 的 页 面 。 图 5-2 显示 这 种 效果 。 
V 提示 















































OQ 可 以 直接 将 top.location 设置 为 self.location, 








但 这 有 一 个 副作用 : 用 户 无 法 再 使 用 浏览 器 
back 按钮 。 如 果 他 们 尝试 通过 单 击 back 按钮 
回 前 一 个 页 面 ， 就 会 自动 跳 回 当前 页 面 。 使 
replace() 方 法 会 替换 浏览 器 历史 中 的 当前 
面 ， 这 使 back 按钮 能 够 显示 前 一 个 页 面 。 


5.2 设置 目标 
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| Disable » Cookies - CSS + Forms images. 
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Areally important page here that 
everyone wants to claim as theirs. 


Information * Miscellaneous * Outline "| 
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5-2 ”防止 恶意 拦截 相 


TE ME 4 





匡 架 集 之 后 的 页 面 





所 谓 的 iframe 是 一 种 内 联 框架 。 也 就 是 说 ， 它 是 一 种 可 以 藤 和 人 常规 HTML 页 面 中 的 框架 ， 并 非 
必须 置 于 框架 集 之 内 。 与 一 般 的 框架 一 样 , iframe 也 是 一 份 独立 的 HTML 文档 。 可 以 将 iframe 作为 一 











段 脚 本 的 目标 ， 这 样 便 可 以 在 脚本 的 控制 下 ， 实 时 色 























| 建 内 容 并 脱离 框架 集 将 其 显示 在 页 面 中 。 





在 接 下 来 的 示例 中 , 我 们 会 看 到 一 份 常规 的 HTML 页 面 ， 其 中 包含 一 小 块 区 域 ， 即 iframe, 在 主 
内 容 区 域 的 链接 可 以 通过 目标 区 域 作用 于 iframe. 要 使 用 HTML 加 载 iframe, 可 以 用 <a> 标 签 的 target 





属性 ， 这 里 就 是 这 么 做 的 。 














脚本 5-3 的 代码 可 以 实现 只 需 点 一 下 链接 即 可 将 所 选 页 面 载 人 iframe, Xf 
aA iframe 的 初始 页 面 是 脚本 5-5; 请 求 设置 目标 的 JavaScript 是 脚本 5-6。 还 有 另外 三 个 没有 显示 的 











Y CSS 是 脚本 5-4; 
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简单 HTML 页 面 ， 也 可 以 加 载 到 iframe 中 。 结 果 如 图 5-3 所 示 。 











o TT 
Main Content Area 

Link 1 

Link 2 

Link 3 


You are now looking at 
example 2 











图 5-3 在 主 窗口 中 单 击 链接 ， 触 发 iframe EY 
脚本 5-3 ”此 页 面 创建 iframe 并 调用 外 部 JavaScript 


<!DOCTYPE html» 
<html> 
<head> 
<title>iframe 1</title> 
<script src="script02.js"></script> 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<iframe src-"iframeO1.html" id-"icontent" name="icontent"></iframe> 
<h1>Main Content Area«/hi» 
«h2» 
«a href-"page1.html"»Link 1</a><br> 
«a href-"page2.html"»Link 2«/a»«br» 
«a href-"page3.html"»Link 3«/a» 





=i 























</h2> 
</body> 
</html> 
脚本 5-4 利用 CSS 样式 化 主页 面 并 为 iframe 设 定位 置 
body { 


background-color: #FFF; 
} 


iframe#icontent { 
float: right; 
border: 1px solid black; 
width: 350px; 
height: 300px; 
margin-top: 100px; 


} 
脚本 5-5 显示 在 iframe 中 的 初始 页 面 


<!DOCTYPE html» 
<html> 
<head> 
<title>Content iframe</title> 
</head> 
<body> 


5.3 M JavaScript 加 载 iframe 87 





Please load a page 
</body> 
</html> 


脚本 5-6 需要 用 JavaScript 来 设置 框架 作为 目标 有 很 多 原因 
window.onload = initLinks; 


function initLinks() { 
for (var i=0; i<document.links.length; i++) { 
document. links[i].target = "icontent"; 


} 
1. window.onload = initLinks; 
在 加 载 页 面 时 ， 调 用 initLinks() PARC. 
2. for (var i=0; i«document.links.length; i++) { 
document.links[i].target = "icontent"; 
) 
initLinks() PK Zt ff Pj DJ; viii ERE BEER. ACEI, "CUM target 属性 设置 为 字符 下 

"icontent"。 这 就 需要 用 到 的 所 有 代码 。 

V 提示 

O 如 果 访 问 者 关闭 了 JavaScript 功能 ， 那 么 单 击 第 一 个 链接 时 ， 页 面 会 加 载 进 主 窗口 ， 而 不 是 

icontent iframe。 很 遗憾 ， 但 这 就 是 框架 的 工作 方式 。 

口 没有 必要 通过 脚本 设置 目标 ,但 通过 编程 方式 设置 目标 仍旧 比较 方便 。 通 常 ， 编 写 主 内 容 区 域 的 
开发 人 员 不 清楚 iframe 开发 人 员 想 要 什么 ， 反之 亦 然 。 在 硬 编码 方式 下 ， 需 要 将 target 写 到 充斥 
整个 网 站 的 无 数 的 <a> 标 签 中 。 相 比 之 下 ,将 target 写 入 一 行 JavaScript 代码 中 显然 更 灵活 。 

O 在 脚本 5-3 中 ,通常 只 设置 iframe 的 id 就 可 以 了 。 不 过 ， 有 些 浏 览 器 要 求 使 用 name 属性 (如 
Firefox 和 Internet Explorer )， 因 此 ， 这 里 对 两 者 都 进行 了 设置 。 
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5.3 FA JavaScript 加 载 iframe 


当然 ， 不 仅 使 用 JavaScript 设置 目标 ， 你 可 能 希望 做 更 多 事情 ， 比 如 加 载 其 他 HTML 页 面 。 本 节 
讲解 应 该 怎么 做 。 同 样 ， 我 们 有 一 个 建立 iframe 的 主页 面 ， 这 个 页 面 实质 上 与 脚本 5-13 相同 。 还 有 
一 个 提供 iframe 初始 内 容 的 页 面 ， 它 与 脚本 5-5 相似 。 所 需 的 JavaScript 如 脚本 5-7 所 示 。 





























脚本 5-7 这 个 脚本 把 HTML 页 面 加 载 进 icontent iframe 


window.onload = initLinks; 
function initLinks() { 


for (var i=0; i<document.links.length; i++) { 
document. links[i].onclick = setContent; 


} 


function setContent() { 
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document . getElementById("icontent").contentWindow.document.location.href = this.href; 
return false; 





=> FH JavaScript 加 载 iframe 








1. for (var i=0; i«document.links.length; i++) { 

document. links[i].onclick = setContent; 
} 

在 脚本 5-6 WEH P, initLinksys() KASE vt TE DIU BAA. ORE OR, 我们 对 页 面 中 所 有 
的 链接 都 进行 了 设置 ， 当 其 被 单 击 时 ， 就 会 调用 setContent() 函数 。 

2. function setContent() { 

document. getElementById("icontent").contentWindow.document.location.href = this.href; 

在 这 个 示例 中 ， 单 击 链 接 就 会 触发 setcontent() 函 数 ， 这 个 函数 将 新 页 面 加 载 进 这 ame， 结 果 见 图 
5-4。 这 是 通过 找到 页 面 中 的 icontent 元 素 ， 并 将 它 的 contentWindow.document.location.href i Eg 
thishref 实现 的 。 也 就 是 说 ， 我 们 找到 给 定 id 的 元 素 〈 在 这 里 就 是 icontent ) 并 获取 元 素 的 content 
Window， 然 后 获取 它 包 含 的 document。 之 后 ， 再 获取 document 的 location 并重 置 href， 而 这 个 href 
就 是 用 户 选 择 加 载 的 URL. 






























































Main Content Area 








You are now looking at 
example 3 











KI 5-4 当 单 击 主 窗口 中 的 链接 时 ，icontent iframe 中 会 加 载 新 页 面 





3. return false; 


最 后 ，setContent() 返 回 false， 意 味 着 告知 浏览 髓 不 要 将 href 一 并 载 人 主 窗 口 。 和 否则 两 者 都 会 
被 载 人 。 这 是 因为 所 有 的 功能 都 通过 JavaScript 实现 了 ， 所 以 无 需 载 人 href。 


5.4 iframe 的 使 用 


由 于 JavaScript 可 以 实时 创建 页 面 内 容 ， 因 此 在 基于 用 户 的 选择 来 加 载 iframe 页 面 方面 是 非常 有 
用 的 。 脚 本 5-8 是 一 个 常规 的 HTML 页 面 ， 其 中 加 载 了 之 前 常用 的 虚拟 iframe 页 面 。 脚 本 5-9 详 见 下 
文 ， 创 建 了 一 个 页 面 并 加 载 到 了 名 为 icontent 的 iframe 中 。 运 行 结果 如 图 5-5 所 示 。 




































































脚本 5-8 这 个 页 面 中 有 一 个 位 于 右 侧 的 这 ame， 还 包括 一 些 链接 说 明 


<!DOCTYPE html» 
<html> 
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<head> 
<title>iframe 3</title> 
<script src="script04.js"></script> 
<link rel="stylesheet" href="script01.css"> 
</head> 
<body> 
<iframe src-"iframeO1.html" id="icontent" name="icontent"></iframe> 
<h1>Main Content Area</h1> 
<h2> 
<a href="#">Link 1</a><br> 
<a href="#">Link 2</a><br> 
<a href="#">Link 3«/a» 
</h2> 
</body> 
</html> 


脚本 5-9 将 内 容 添加 至 名 为 icontent 的 iframe 中 的 脚本 


window.onload = initLinks; 





function initLinks() { 
for (var i=0; i<document.links.length; i++) { 
document. links[i].onclick = writeContent; 
document. links[i].thisPage = i+1; 
} 
} 


function writeContent() { 
var newText = "«hi»You are now looking at example " + this.thisPage + ".<\/h1>"; 


document .getElementById("icontent").contentWindow.document.body.innerHTML = newText; 
return false; 





= - m) 
| Main Content Area 

Link 4, 
|| Link 3 

Link 3 


You are now looking at 
example 1 























图 5-5 这 是 脚本 5-9 的 运行 结果 ， 


> 如 何 为 iframe 创建 内 容 


1. for (var i=0; i«document.links.length; i++) { 





] JavaScript 写 的 iframe 


— 








document. links[i].onclick = writeContent; 
document.links[i].thisPage = i+1; 
} 
initLinks() 函 数 首先 循环 遍历 页 面 上 所 有 的 链接 。 然 后 对 于 每 个 链接 设置 了 两 个 元 素 : onclick 处 
HEKI thisPage 属性 。 后 者 存 有 单 击 链接 后 会 显示 的 页 码 ， 例 如 链接 0 就 是 “page 1”， 链 接 1 就 是 
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“page 2”"， 以 此 类 推 。 循 环 中 的 onclick 处 理 函 数 可 以 让 每 个 链接 在 单 击 后 调用 writeContent() PRA. 


2.var newText = "<h1>You are now looking at example " + this.thisPage + ".<\/h1>"; 


document. getElementById("icontent").contentWindow.document.body.innerHTML = newText; 
这 是 writeContent() 函 数 的 内 容 : 它 首先 声明 并 设置 一 个 变量 newText ， 然 后 存 人 一 些 字 串 。 考 虑 
到 icontent 元 素 ( 5.3 节 讲 过 相关 内 容 ), 将 它 的 contentWindow. document . body . innerHTML 重 置 为 newText。 
v 提示 
OQ 为 什么 第 2 步 中 和 斜 杠 (“/”) HUTA BRAT. CP) ? 根据 标准 ， 浏 览 器 可 能 会 把 结束 标签 的 
起 始 字符 (“</”) 理解 为 代码 行 的 结尾 。 反 和 斜 杠 将 斜 杠 转 义 ， 让 我 们 在 不 引起 错误 的 情况 下 写 
出 HTML. 


5.5 创建 动态 iframe 


基于 上 面 的 示例 ,我们 可 以 使 用 JavaScript 为 iframe 创建 动态 内 容 。 创 建 的 内 容 如 脚本 5-10 所 示 。 
当 用 户 单 击 任意 一 个 链接 时 ，JavaScript 向 iframe 写 和 人 新 的 代码 。 在 这 个 示例 中 ， 显 示 的 是 页 面 的 名 
称 以 及 当前 会 话 中 用 户 访问 页 面 的 次 数 。 

脚本 5-10 ”这 段 脚本 会 计算 iframe 的 内 容 ， 并 将 其 写 入 窗口 


window.onload = initLinks; 
var pageCount = new Array(0,0,0,0); 



























































function initLinks() { 
for (var i=0; i<document.links.length; i++) { 
document.links[i].onclick = writeContent; 
document. links[i].thisPage = i+1; 
} 
} 


function writeContent() { 
pageCount[this.thisPage]++; 


var newText = "<hi>You are now looking at example " + this.thisPage; 
newText += ".<br>You have been to this page " 
newText += pageCount[this.thisPage] + " times.<\/hi>"; 


document. getElementById("icontent").contentWindow.document.body.innerHTML = newText; 
return false; 


) 


aa 加 载 动 态 frame 








1. var pageCount = new Array(0,0,0,0); 

为 了 显示 加 载 页 面 的 次 数 ， 我 们 需要 一 种 记录 该 信息 的 方法 。 在 这 里 我 们 将 会 使 用 pageCount。 
2. pageCount[this.thisPage]++; 

这 行 代码 自 增 pageCount 数组 ， 这 样 我 们 就 可 以 跟踪 到 访问 特定 页 面 的 次 数 了 。 











3. var newText = "«hi»You are now looking at example " + this.thisPage; 


newText += ".«br»You have been to this page "; 
newText += pageCount[this.thisPage] + " times.<\/h1>"; 
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这 些 行 实时 创建 iframe 的 内 容 。 
4. document .getElementById("icontent").contentWindow.document.body.innerHTML = newText; 


return false; 
跟 先 前 的 示例 一 样 ， 我 们 获取 icontent R, EAH body 的 innerHTML 属性 。 用 两 行文 字 替 换 
innerHTML， 结 果 如 图 5-6 所 示 。 由 于 所 有 工作 都 已 完成 ， 因 此 最 后 以 return false 结尾 ， 确 保 浏览 
不 会 执行 其 他 误 操 作 。 
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You are now looking at 
example 3. 

You have been to this 
page 2 times. 

















图 5-6 每 次 单 击 主 窗口 中 的 链接 ，iframe 的 内 容 就 会 更 新 
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只 要 主 窗口 和 iframe 都 来 自 同样 的 域 ， 那 么 它们 共享 单个 外 部 JavaScript 文件 是 非常 方便 的 。 这 
里 , 我 们 将 通过 iframe 加 载 外 部 JavaScript 文件 来 演示 它 如 何 被 主 窗口 调用 , 如 图 5-7 所 示 。 脚本 5-11 
是 主 HTML 页 面 。 脚 本 5-12 是 载 入 到 iframe 中 的 页 面 。 脚 本 5-13 是 我 们 的 JavaScript 文件 。 


CHENG] ames 
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Link 3 























图 5-7 通过 调用 iframe 中 的 代码 ， 更 新 主页 面 上 的 图 片 











脚本 5-11 页 面包 含 一 个 image 标签 ,但 不 显示 任何 内 容 


«IDOCTYPE html» 
«html» 
«head» 


"m 
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<title>iframe 5</title> 
«link rel-"stylesheet"href-"scripto1. 
css"> 
</head> 
<body> 
Today's featured site: 
<img src="images/spacer.gif" width="400" height="75" id="adBanner" alt="banner"> 
<iframe src-"iframeO2.html" id="icontent" name="icontent" ></iframe> 
<h1>Main Content Area</h1> 
<h2> 
<a href="#">Link 1</a><br> 
<a href="#">Link 2</a><br> 
<a href="#">Link 3</a> 
</h2> 
</body> 
</html> 


脚本 5-12 ”此 页 面 只 加 载 指向 其 父 页 面 的 外 部 JavaScript 文件 


<!DOCTYPE html» 
<html> 
<head> 
<title>Content iframe</title> 
<script src="script06.js"></script> 
</head> 
<body> 
Please load a page 
</body> 
</html> 


脚本 5-13 ”这 段 脚本 会 更 新 父 页 面 


window.onload = initLinks; 
var bannerArray = new Array("images/reading1.gif", "images/reading2.gif", "images/reading3.gif"); 





























function initLinks() { 
for (var i-0; i«parent.document.links.length; i++) ( 
parent.document.links[i].onclick = setBanner; 
} 


setBanner(); 


function setBanner() { 
var randomNum = Math. floor(Math.random() * bannerArray. length); 


parent.document.getElementById("adBanner").src = bannerArray[randomNum]; 
return false; 


) 

> FAT cim e FH ES 

1. var bannerArray = new Array("images/reading1.gif" , "images/reading2.gif" , "images/reading3.gif"); 
首先 创建 一 个 新 数组 ， 其 中 包含 所 有 可 能 显示 的 广告 条 图 像 的 文件 名 ， 并 将 这 个 数组 赋值 给 


bannerArray 变量 。 























2. for (var i=0; i«parent.document.links.length; i++) { 
parent.document.links[i].onclick = setBanner; 


5.7 ”打开 新 窗口 93 





现在 开始 initLink() 函 数 中 的 代码 。 因 为 要 从 iframe 的 上 下 文中 调用 这 个 函数 , 所 以 设置 主 窗口 
中 链接 的 方式 与 前 面 的 示例 有 点 儿 差 异 。 这 一 次 ,我 们 重新 设置 每 个 链接 的 父 文 档 的 onclick 处 理 程序 。 

3. setBanner(); 

作为 最 后 的 初始 化 步 又 ， 调 用 setBanner() 函 数 。 

4. var randomNum = Math.floor(Math.random() * bannerArray.length); 

Set Banner() 函 数 首先 计算 一 个 随机 数 。 这 一 行 调用 Math. random() eK, 将 结果 乘 以 bannerArray 
数组 中 的 成 员 数 量 ， 最 后 对 结果 向 下 取 整 ， 从 而 得 到 一 个 0 到 数组 成 员 数 量 减 1 之 间 的 随机 整数 。 然 
后 ， 将 结果 放 进 randomNum 变量 。 

5. parent.document.getElementById("adBanner").src = bannerArray[randomNum] ; 

主 窗口 仅 通过 其 id 就 可 以 指向 一 个 frame 一 一 它 的 子 文档 。 但 在 iframe 指向 主 窗 口 之 前 , 它 需 要 
显 式 地 指向 其 parent. 这 里 , 我 们 获取 该 元 素 (一 个 window )、 其 中 的 document, LAA adBanner 元 素 。 
然后 ， 将 adBanner 的 src 属性 设置 为 数组 的 当前 元 素 ， 也 就 是 新 的 图 片 名 称 ， 将 来 会 显示 在 页 面 上 。 
最 后 ， 主 窗口 中 的 广告 条 会 被 设置 为 随机 从 该 数组 中 选取 。 


5.7 打开 新 窗口 


开发 人 员 可 能 希望 在 不 干扰 用 户 正 在 访问 的 页 面 的 前 提 下 , 通过 打开 一 个 新 窗口 来 为 用 户 显 示 一 
些 附 加 的 信息 。 例 如 ， 我 们 可 能 希望 为 一 篇 技术 论文 或 新 闻 报 道 打开 注释 和 评论 。 虽 然 使 用 HTML 
可 以 打开 新 浏览 器 窗口 ， 不 过 使 用 JavaScript 的 话 ， 对 新 窗口 的 内 容 和 功能 可 以 有 更 高 的 可 控 性 。 图 
5-8 显示 的 是 一 个 标准 的 浏览 器 窗口 ， 其 中 所 有 的 部 分 都 已 标明 。 我 们 创建 的 窗口 可 以 包括 其 中 的 任 
意 部 分 或 者 全 部 。 脚本 5-14 是 HTML。 脚本 5-15 显示 的 JavaScript 文件 在 图 5-9 所 示 的 页 面 中 创建 了 
一 个 窗口 ， 单 击 链接 会 触发 创建 新 窗口 (在 本 例 中 ， 此 窗口 会 显示 一 幅 猫 的 图 片 )。 













































































































































































地 址 栏 
EE TTHTTE TT: = 菜单 栏 ( 仅 限于 Windows 
工具 栏 DC X 4 (DI rep//aropboccom/u; Yy -| [$z » fal 或 Unix 操作 系统 ) 
A standard (if a bit dull) window  . | 滚动 条 
RES om z5- 快速 缩放 
图 5-8 浏览 器 窗口 的 各 种 元 素 。 图 中 的 名 称 对 应 open() 命 令 中 可 以 使 用 的 参数 

















脚本 5-14 此 HTML 页 面 调用 可 以 打开 新 窗口 的 外 部 JavaScript 文件 


<!DOCTYPE html» 
<html> 
<head> 
<title>Opening a Window</title> 
<script src="script07.js"></script> 
</head> 
<body> 
«hi»The Master of the House</h1> 
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<h2>Click on His name to behold He Who Must Be Adored</h2> 
«h2»«a href="#" class="newWin">Pixel «/a»«/h2» 

</body> 

</html> 


The Master of the House 


Click on His name to behold He Who Must Be Adored 





Pixel @ pise!t jpg UPEG Image, 333 » 250 pines || 5 i 
ae 


a dropbesusercontert.com 


a 








图 5-9 ”打开 新 窗口 








脚本 5-15 通过 下 面 的 脚本 打开 新 窗口 


window.onload = newWinLinks; 


function newWinLinks() { 
for (var i=0; i<document.links.length; i++) { 
if (document.links[i].className == "newWin") { 
document.links[i].onclick = newWindow; 
} 


} 
} 


function newWindow() { 


var catWindow = window.open("images/pixel1. jpg", "catWin", "resizable=no,width=350, height=260") ; 
return false; 


} 

你 们 可 能 注意 到 了 ， 在 脚本 5-14 中 没有 任何 JavaScript 代码 ， 只 有 一 行 调 用 外 部 JavaScript 文件 的 
代码 。 此 外 ， 我 们 在 页 面 中 还 引入 了 link 标签 的 属性 : newin 类 。 同 iframe 的 示例 类 似 ， 脚 本 5-15 包 
含 一 个 用 于 调用 函数 的 onload 事件 处 理 程序 ， 在 这 里 名 为 newinLinks。 这 个 函数 遍历 页 面 中 的 所 有 链 
接 ， 查 看 是 否 包含 newWin 类 。 如 果 包 含 newWin 类 ， 那 么 单 击 对 应 的 链接 就 会 调用 newwindow 函数 。 


1. document.links[i].onclick = newWindow 

在 newWinLinks () KAUF ,我 们 通过 JavaScript 添加 了 newindow() ek Ba] (EA onclick 处 理 程序 。 
2. function newWindow() { 

首先 定义 一 个 名 为 newWindow() 的 函数 。 

3. var catWindow = window.open("images/pixel1. jpg", “catWin", "resizable=no,width=350, height=260") ; 


catWindow 包含 一 个 新 的 窗口 对 象 ， 指 向 图 片 文件 pixell.jpg。 新 窗口 的 名 称 为 catWin。 名 称 是 必 
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填 项 ， 因 为 随后 的 代码 中 我 们 可 能 需要 通过 链接 或 其 他 脚本 来 指向 此 窗口 。 新 窗口 的 尺寸 为 350 像素 
宽 、260 像素 高 。 这 些 参数 是 可 选 的 。 
V 提示 
O 在 第 3 步 中 , 在 width 和 height 参数 的 逗号 之 间 不 能 包含 任何 字符 。 如 果 包 含 其 他 字符 ， 很 
可 能 在 有 的 浏览 器 中 脚本 就 无 法 正常 运行 了 。 一般 情况 下 ， 遇 到 脚本 错误 时 ， 需 要 对 脚本 进行 
调试 ， 查 找 类 似 的 小 错误 。 语 法 错误 是 一 个 主要 的 报错 原因 ， 特 别 是 对 新 程序 员 来 说 。 
O Internet Explorer 6 及 其 更 高 版 本 在 安全 方面 制定 了 一 些 稀奇 古怪 、 前 后 不 一 的 策略 (是否 支持 
脚本 控制 窗口 等 )， 如 果 关 闭 了 安全 策略 ， 那 么 本 章 的 所 有 示例 都 能 运行 ， 但 我 们 不 建议 开发 
人 员 关 闭 安全 策略 或 者 要 求 网 站 的 访问 者 关闭 自己 的 安全 策略 。 此 外 ,在 IE7 及 更 高 版 本 中 ， 
根据 用 户 选 项 卡 式 的 浏览 设置 ， 新 窗口 可 以 在 新 标签 页 中 显示 。 

































































在 窗口 中 添加 参数 

要 将 图 5-7 中 列 出 的 一 个 或 多 个 参数 添加 到 你 的 窗口 中 ,可 以 将 其 放置 在 open() 命 令 中 并 用 引 
号 封装 。 在 希望 保留 的 功能 名 称 后 面 加 上 =yes， 在 不 想 保留 的 功能 名 称 后 面 加 上 =no ( 因为 =no 通常 
是 默认 的 ， 所 以 开发 人 员 可 以 跳 过 这 些 功 能 ， 不 予 设 置 )。 例如 ， 如 果 我 们 想 要 一 个 特定 尺寸 且 带 
有 工具 栏 、 地 址 栏 和 滚动 条 的 窗口 ， 将 下 面 的 代码 作为 open() 命 令 的 参数 即 可 。"toolbar=yes， 
location=yes，scrollbars=yes，width=300，height=300"。 注 意 ， 这 样 创建 的 窗口 不 带 有 菜单 栏 或 
状态 栏 ， 大 小 也 不 可 以 改变 。 

直接 忽略 某 参 数 其 实 就 相当 于 将 其 置 为 =no (通常 是 这 样 的 ， 下 面 有 一 些 例 外 情况 )。 开 发 人 员 
也 可 以 直接 使 用 参数 名 称 ( 不 带 =yes ) 来 开启 对 应 功能 。 由 于 存在 一 些 例 外 情况 ， 所 以 我 们 建议 显 
式 地 声明 其 打开 和 关闭 状态 。 如 "location=yes,scrollbars=yes"。 

图 5-10 从 左 到 右 分 别 显示 的 是 脚本 5-15 在 Windows 中 的 Firefox, Windows 中 的 IE, Mac 中 的 
Chrome 和 Mac 中 的 Safari 中 的 显示 效果 。 可 以 看 到 ， 每 个 浏览 器 的 显示 效果 都 不 尽 相 同 。 事 实 上 ， 真 
正 达到 我 们 预期 效果 的 是 Safari。 大 家 自己 得 到 的 结果 可 能 跟 我 们 的 不 一 样 。 拿 Firefox 来 说 ， 它 将 最 终 
控制 权 交 给 用 户 如 果 用 户 选择 始终 显示 状态 栏 ,那么 不 管 脚本 是 如 何 编写 的 ,状态 栏 都 会 一 直 显示 。 

最 后 ， 开 发 人 员 仍 旧 需 要 考虑 其 用 户 可 能 使 用 的 浏览 器 ,并 在 所 有 这 些 浏览 器 中 测试 自己 的 脚 
本 。 这 很 可 能 意味 着 测试 的 时 候 需 要 用 到 Windows 和 Mac ( 可 能 还 有 Linux ) 设备 。 测 试 脚本 (如 
果 有 必要 的 话 ， 还 需要 修订 脚本 ) 可 以 让 我 们 在 各 种 浏览 器 下 都 能 实现 预期 的 效果 。 
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图 5-10 不 同 的 浏览 器 有 不 同 的 窗口 默认 设置 ， 所 以 像 地 址 栏 之 类 的 元 素 会 始终 出 现在 一 些 浏览 
中 ,不 管 脚本 中 是 否 声明 显示 
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5.8 ”为 窗口 加 载 不 同 的 内 容 

在 前 面 的 示例 中 ， 单 击 链接 会 在 新 窗口 中 打开 一 幅 图 片 。 但 如 果 页 面 上 有 多 个 链接 ， 而 且 我 们 希 
望 这 些 链 接 都 指向 同一 个 窗口 该 怎么 办 ?脚本 5-16 演示 了 这 种 技术 。 图 5-11 中 的 主 窗口 有 3 个 链接 。 
单 击 其 中 任意 一 个 都 能 打开 新 窗口 ， 然 后 显示 相应 的 小 猫 图 片 。 如 果 切 换 回 主 窗口 ， 单 击 男 一 个 链接 
的 话 ， 小 窗口 中 的 图 片 会 被 新 图 片 替换 掉 。 


脚本 5-16 ”通过 此 脚本 ， 可 以 打开 一 个 新 窗口 ， 其 中 根据 所 单 击 链接 的 不 同 ， 显 示 各 式 各 样 的 内 容 


window.onload = newWinLinks; 





















































function newWinLinks() { 
for (var i=0; i<document.links.length; i++) { 
if (document.links[i].className == "newWin") { 
document. links[i].onclick = newWindow; 


} 


function newWindow() { 
var catWindow = window.open(this.href, "catWin", "width=350, height=260") ; 
catWindow. focus (); 
return false; 


More pictures of our cat 


Click on the description to see his mood 


Tired @ pirelt jpg ÜPEG Image, 333 x 250 pixels) 


Exhavajed - dropbonusercontent.com 








图 5-11 单 击 3 个 链接 中 的 任意 一 个 ， 都 会 打开 一 个 
小 窗口 ， 并 用 相应 的 小 猫 图 片 填充 该 窗口 



































1. document.links[i].onclick = newWindow; 

在 newNinLinks() 函 数 中 ,我们 通过 JavaScript 添加 newWindow() 函 数 调 用 ,作为 onclick 处 理 程序 。 
“4 newWindow() 被 调用 时 ,使 用 this.href, HI HTML 中 href 属性 的 值 。 

2. function newWindow() { 

这 里 我 们 定义 个 新 的 函数 : newWindow()。 
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3. var catWindow = window.open(this.href,"catWin", "width=350, height=260") ; 

这 是 catWindow 变量 ,我 们 正在 打开 一 个 新 的 窗口 对 象 , 带 有 窗口 的 各 项 参数 。 首 先 传人 this href 
的 值 。 新 窗口 的 名 称 为 catWin，width 和 height 参数 设置 窗口 的 尺寸 。 

4. catWindow. focus(); 

这 里 使 用 focus() 方 法 使 得 我 们 新 打开 的 窗口 位 于 最 前 面 。 我 们 需要 显示 某 个 窗口 时 ， 就 可 以 使 
用 focus()。 如 果 同 时 有 多 个 窗口 打开 ， 那 么 使 用 focus() 可 以 将 指定 窗口 排列 在 最 顶端 。 

5. return false; 

函数 以 return false 结束 ， 告 知 HTML PERA href, 

v 提示 

口 在 第 4 步 中 使 用 到 了 blur() ， 它 是 与 focus() 作 用 相反 的 方法 。 使 用 blur() 方 法 可 以 将 窗口 置 

于 所 有 ius 口 的 最 后 面 。 窗口 对 象 的 focus() 和 blur() 方 法 对 应 于 onfocus 和 onblur 事件 处 

理 程 序 ， 通 过 它们 可 以 在 窗口 获得 或 者 失去 焦点 时 执行 操作 。 







































































不 要 阻止 弹出 窗口 ! 
两 个 任务 都 是 关于 如 何 使 用 JavaScript 创建 和 操作 窗口 的 。 这 些 特定 的 窗口 称 为 弹出 
而 且 被 很 多 网 友 视 为 眼中 钉 。 这 里 我 们 演示 了 弹出 窗口 的 一 些 正 面 用 途 ， 如 果 你 的 浏览 器 不 
uS de 这 些 示 例 ， 那 可 能 是 在 浏览 器 中 关闭 了 弹出 窗口 ,也 可 能 是 正在 运行 的 其 他 软件 禁用 了 
弹出 窗口 。 大 部 分 浏览 器 可 以 打开 用 户 指定 的 弹出 窗口 ， 而 有 些 浏览 器 不 行 。 所以， 在 大 家 学 习 本 
章 内 容 的 时 候 ， 务 必 确 保 禁 用 了 那些 关闭 弹出 窗口 的 功能 。 
然而 ， 有 些 浏览 器 ( 说 你 呢 ，Internet Explorer) 认为 自己 比 用 户 聪明 ， 号 称 为 安全 起 见 而 强制 
关闭 了 脚本 中 的 弹出 窗口 功能 ， 即 便 是 用 户 请 求 打 开 也 不 行 。 
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aq 果 需 要 从 Web 站 点 的 用 户 那里 收集 信息 ， 那 么 就 需要 使 用 表单 。 
表单 可 以 包含 大 多 数 常见 的 图 形 界面 元 素 ， 包 括 输入 字段 、 单 选 按钮 、 复 选 框 、 弹 出 菜单 
和 输入 列表 。 另 外 ，HTML 表单 可 以 包含 密码 字段 ， 这 种 控件 可 以 避免 用 户 的 输入 被 别人 偷 看 。 

在 填写 表单 之 后 ， 单 击 表单 上 的 Submit 按钮 ， 会 将 表单 的 信息 发 送 到 Web 服务 器 ， 在 服务 器 上 
服务 器 端 脚本 会 解释 并 操作 这 些 数据 。 通 常 ， 将 数据 存储 在 数据 库 中 供 以 后 使 用 。 在 服务 器 端 存储 数 
据 之 前 ,需要 确保 用 户 输入 的 数据 是 “干净 ”的 ,也 就 是 说 ,数据 是 准确 的 且 具 有 正确 的 格式 。JavaScript 
是 检查 数据 的 好 方法 , 这 种 技术 称 为 表单 验证 ( form validation ) 尽管 服务 器 端 脚 本 可 以 完成 验证 (而 
且 应 该 作为 预防 措施 , 因为 有 些 用 户 会 在 浏览 器 中 关闭 JavaScript 功能 ), 但 是 在 客户 机 上 用 JavaScript 
进行 验证 要 快 得 多 ， 而 且 用 户 操作 的 效率 也 更 高 。 

在 本 章 中 ， 你 将 学 习 如 何 使 用 JavaScript 确保 表单 包含 有 效 的 信息 ， 针 对 另 一 个 字段 中 的 数据 检 
查 一 个 字段 中 的 数据 ， 以 及 突出 显示 错误 的 信息 ， 让 用 户 知道 需要 修改 什么 。 
目前 需要 了 解 的 HTML 知识 见 表 6-1。 





















































































































































表 6-1 目前 需要 了 解 的 HTML 知 识 一 一 表单 
Bh X 属 性 意 X 
form 这 个 标签 包含 下 面 的 任何 标签 ， 构 成 有 效 的 HTML 表 单 
action 在 Web 服 务 器 上 处 理 数据 的 服务 器 端 脚本 的 名 称 
input 这 个 标签 显示 不 同类 型 的 表单 字段 ， 有 具体 取决 于 type 属 性 的 值 
name 主要 用 来 对 单 选 按钮 进行 分 组 
maxlength ”用 户 可 以 在 这 个 字段 中 输入 的 数据 的 最 大 长 度 
size 在 页 面 上 显示 的 字符 数量 
type 所 需 的 输入 控件 类 型 ， 有效 值 是 button、checkbox、image、password、radio、reset、 
submit 和 text 
value 预先 为 这 个 表单 字段 设置 的 值 
label 用 来 为 没有 内 置 标签 的 控件 指定 标签 ， 比 如 文本 字段 、 复 选 框 、 单 选 按钮 和 菜单 
for 将 标签 与 特定 元 素 的 id 关联 起 来 
option 在 Select 标签 中 可 用 的 选项 











selected 指出 这 个 选项 是 否 作为 默认 选项 
value 每 个 选项 的 预 设 值 
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( 续 ) 
标 X m 性 a X 
select 这 种 表单 字段 显示 弹出 菜单 或 滚动 列表 (取决 于 size 属 性 ) 
size 在 页 面 上 显示 的 选项 数量 。 如 果 这 个 属性 设置 为 1, 或 者 没有 提供 这 个 属性 , 就 会 显 
示 弹 出 菜单 





6.1 选择 并 转移 导航 菜单 


在 Web 上 你 可 能 见 过 许多 标准 的 导航 菜单 ， 可 以 选择 菜单 中 的 一 个 选项 并 单 击 Go 按钮 ， 这 样 就 
会 转 到 对 应 的 目的 地 。 例 如 ,许多 在 线 商店 使 用 这 样 的 菜单 将 用 户 转 到 不 同 的 部 分 。 但 是 ， 只 需 用 上 
一 点 儿 JavaScript, 就 可 以 让 用 户 只 通过 菜单 选择 进入 不 同 的 目的 地 , 而 不 再 需要 Go 按钮 ( 见 图 6-1 )。 
这 会 使 用 户 觉 得 站 点 更 干净 利落 而 且 响 应 性 更 好 ， 所 以 是 一 种 有 益 的 做 法 。 我 们 将 这 些 JavaScript 增 
强 菜单 称 为 “选择 并 转移 ”菜单 ， 很 容易 创建 它们 。HTML 见 脚 本 6-1, CSS 见 脚本 6-2, JavaScript 
见 脚本 6-3。 你 不 再 需要 Go 按钮 了 ! 

















































































































图 6-1 选择 这 个 菜单 中 的 任何 选项 ， 就 会 直接 跳 到 对 应 的 页 面 ， 而 不 需要 单独 的 Go 按钮 
脚本 6-1 ”选择 并 转移 菜单 的 HTML 非常 简单 


<!DOCTYPE html> 
<html> 
<head> 
<title>Select and Go Navigation</title> 
<link rel="stylesheet" href="script01.css"> 
<script src="script01.js"></script> 
</head> 
<body> 
<form action="gotoLocation.cgi" class="centered"> 
<select id="newLocation"> 
<option selected>Select a topic</option> 
«option value="scripto6.html">Cross-checking fields</option> 
<option value="scripto7.html">Working with radio buttons</option> 
«option value-"scripto8.html"»Setting one field with another</option> 
<option value="scripto9.html">Validating Zip codes</option> 
<option value="script10.html">Validating email addresses</option> 
</select> 
<noscript> 
<input type="submit" value="Go There!"» 
</noscript> 
</form> 
</body> 
</html> 
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脚本 6-2 这 个 CSS 文件 的 内 容 并 不 多 ， 但 是 当 你 想 添加 更 多 样式 时 ， 可 以 在 这 里 添加 


.centered { 
text-align: center; 


脚本 6-3 可 以 使 用 JavaScript 和 表单 实现 站 点 导航 


window.onload = initForm; 
window.onunload = function() {}; 


function initForm() { 
document. getElementById("newLocation").selectedIndex = 0; 
document. getElementById("newLocation").onchange = jumpPage; 


} 


function jumpPage() { 
var newLoc = document.getElementById("newLocation") ; 
var newPage = newLoc.options[newLoc.selectedIndex].value; 


if (newPage != "") { 
window. location = newPage; 
} 
} 


p^ 创建 选择 并 转移 菜单 








1. window.onload = initForm; 
window.onunload = function() {}; 








在 窗口 加 载 时 ， 调 用 initForm() 函 数 。 下 一 行 需要 解释 一 下 ， 因 为 它 是 处 理 某 些 浏览 融 的 古怪 行 








为 的 变通 方法 。 





当 窗 口 印 载 时 ( 即 关闭 窗 口 或 者 浏览 絮 转 到 男 一 个 网 址 )， 我 们 调用 一 个 匿名 函数 ( anonymous 








function )， 即 没有 名 称 的 函数 。 在 这 个 示例 中 ， 这 个 函数 不 但 没有 名 称 ， 而 且 根 本 不 做 和 有 
供 这 个 函数 是 因为 必须 将 onunload 设置 为 某 种 东西 ， 否 则 ， 当 单 击 浏览 器 的 back 按钮 时 ， 就 不 会 触 

















F 何 事情 。 提 





# onload 事件 ， 因 为 在 某 些 浏览 器 (比如 Firefox 和 Safari) 中 页 面 会 被 缓存 。 让 onunload 执行 任何 

















操作 ， 就 会 使 页 面 不 被 缓存 ， 因 此 当 用 户 后 退 时 ， 会 发 生 onload 事件 。 


2. document. getElementById("newLocation").selectedIndex = 0; 

















document ..getElementById("newLocation").onchange = jumpPage; 








在 initForm() 函 数 中 ， 第 一 行 获得 HTML 页 面 上 的 菜单 ( 它 的 id 为 newLocation )， 并 且 将 它 的 
































selectedIndex 属性 设置 为 零 ， 这 会 使 它 显 示 Select a topic. 
第 二 行 让 脚本 在 菜单 选择 发 生 改 变 时 ， 调 用 jumpPage() 函 数 。 
3. var newLoc = document.getElementById("newLocation"); 
在 jumpPage() PKC, newLoc 变量 查找 访问 者 在 菜单 中 选择 的 值 。 


4. var newPage = newLoc.options[newLoc.selectedIndex].value; 











从 方 括号 中 的 代码 开始 ,向 外 依次 分 析 。newLoc.selectedIndex 是 一 个 0~ 5 的 数字 (KINA 6 











菜单 选项 。 记 住 JavaScript 的 编号 常常 是 基于 零 的 )。 得 到 这 个 数字 之 后 , 接 下 来 获得 对 应 的 菜单 项 的 

















值 ， 这 就 是 我 们 希望 跳 转 到 的 网 页 的 名 称 。 然 后 ， 将 结果 赋值 给 变量 newPage。 
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5. if (newPage !- "") { 
window. location = newPage; 

这 个 条 件 语 句 首先 检查 newPage 是 否 非 空 。 换 句 话说， 如 果 newPage 有 一 个 值 ， 那 么 让 窗口 转 到 

选择 的 菜单 项 所 指定 的 URL. 

V 提示 

D 这 个 脚本 最 棒 的 一 点 是 ， 在 添加 了 JavaScript 函数 之 后 ， 当 添加 、 修 改 或 改变 下 拉 菜 单项 时 ， 
根本 不 需要 修改 这 个 函数 ， 只 需要 设置 菜单 项 的 值 C 即 菜 单项 跳 转 到 的 URL )。 因 此 ， 这 个 脚 
本 很 适合 WYSIWYG 页 面 编辑 器 。 

O 正如 前 面 提 到 的 ，Firefox 会 对 页 面 进行 缓存 ， 因 此 在 单 击 back 按钮 时 不 会 触发 onload 事件 。 
前 面 提供 了 一 种 变通 方法 ， 男 一 种 可 以 采用 的 方法 是 添加 下 面 这 行 代码 : 
window.onpageshow = initForm; 

我 们 没有 采用 这 种 方法 ,因为 它 在 Safari ( 另 一 种 对 页 面 进行 缓存 的 浏览 需 ) 中 不 起 作用 。 
但 是 ， 如 果 你 专门 针对 Firefox 设计 网 站 ， 那 么 应 该 知道 有 两 个 非 标准 的 窗口 事件 处 理 程 
序 : onpageshow 和 onpagehide， 可 以 使 用 它们 处 理 只 希望 在 Firefox 中 触发 的 事件 。 

O 我 们 将 这 些 菜 单 称 为 “选择 并 转移 ”菜单 ， 这 个 名 称 并 不 太 好 听 , 但 是 清楚 地 表明 了 它们 的 作 
用 。 你 可 能 会 看 到 对 同样 的 功能 有 别 的 称呼 。 例 如 , Dreamweaver 将 它们 称 为 “ 跳 转 菜单 "jump 
menu )。 顺 便 说 一 句 ， 如 果 你 是 Dreamweaver 用 户 ， 需 要 一 本 深入 介绍 Dreamweaver 的 好 书 ， 
那么 推荐 我 们 所 写 的 Dreamweaver: Visual QuickStart Guide ( Peachpit Press ). 














































































































照顾 不 支持 JavaScript 的 用 户 
这 个 示例 的 目标 是 ， 在 使 用 表单 跳 转 到 另 一 个 页 面 时 ， 利 用 JavaScript 避免 使 用 Go 按钮 。 但 
是 ， 如 果 用 户 使 用 老式 的 不 支持 JavaScript 的 浏览 器 ， 或 者 关闭 了 浏览 器 的 JavaScript 功能 ， 那 么 
该 怎么 办 ? 没 问题 ， 脚 本 6-1 会 让 Go 按钮 只 在 不 支持 JavaScript 时 显示 ， 从 而 照顾 这 些 用 户 。 
用 表单 从 一 个 页 面 跳 转 到 另 一 个 页 面 而 不 使 用 JavaScript 的 唯一 方法 是 使 用 CGI,CGI 是 在 Web 
服务 器 上 运行 的 一 个 程序 。 脚 本 6-1 在 下 面 这 一 行 中 调用 CGI: 


<form action="gotoLocation.cgi"> 


这 个 form 标签 有 action 属性 ， 它 会 调用 CGI。 但 是 ， 表 单 action 属性 要 求 用 户 单 击 submit 
按钮 ， 而 图 6-1 中 没有 这 样 的 按钮 。 但 是 ， 在 图 6-2 中 有 submit 按钮 ， 这 是 在 关闭 JavaScript 功能 
时 显示 的 页 面 。 下 面 这 些 代码 行 提供 按钮 (包围 在 noscript 标签 中 )， 只 有 在 缺少 JavaScript 支持 
时 这 些 代码 才 会 执行 。 


<noscript> 
<input type="submit" value-"Go There!"» 
</noscript> 


最 酷 的 是 ， 服 务 器 端 脚本 只 在 缺少 JavaScript 支持 时 被 调用 。 如 果 用 户 使 用 支持 JavaScript 的 
浏览 器 ， 那 么 submit 按钮 就 不 会 出 现 ， 而 服务 器 端 脚本 就 是 不 必要 的 。 
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Select a topic 
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K6-2 ”如 果 用 户 的 浏览 器 不 支持 JavaScript 
因为 Go There! 按钮 会 自动 出 现 


6.2 ”动态 地 改变 菜单 


常常 需要 通过 弹出 菜单 向 用 户 提供 选择 输入 的 机 会 ,而且 希望 根据 用 户 在 男 一 个 弹出 菜单 中 所 做 
的 选择 , 改变 一 个 或 多 个 弹出 菜单 的 内 容 。 在 Web 站 点 上 , 你 可 能 见 过 这 样 的 情况 : 站 点 让 你 从 一 个 
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， 他 们 仍然 能 够 在 你 的 站 点 上 跳 转 ， 























单 出 菜单 中 选择 你 所 在 的 国家 ， 然 后 根据 你 的 选择 ， 用 州 或 省 的 名 称 填 充 第 二 个 菜单 。 在 脚本 6-4 
(HTML ) 和 脚本 6-5 (JavaScript) 中 ,我 们 要 使 用 两 个 弹出 菜单 ( 见 图 6-3 )。 第 一 个 菜单 用 来 选择 月 


























当 用 户 选 择 一 个 月 份 时 ， 脚 本 根据 所 选 月 份 的 天 数 ， 填 充 第 二 个 弹出 菜单 ( 见 图 6-4 )。 
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图 6-3” 当 用 户 在 Month 菜单 中 作出 选择 时 , 会 自动 ”图 6-4 选择 一 个 月 份 的 结果 : Day 菜单 中 显示 这 个 


地 填充 Day 菜单 的 内 容 





月 正确 的 天 数 


脚本 6-4 ”弹出 菜单 的 HTML 列 出 了 月 份 ， 但 是 没有 列 出 天 数 


<!DOCTYPE html» 
<html> 
<head> 
<title>Dynamic Menus</title> 
<script src-"script02.js"»«/script» 
</head> 
<body> 
<form action="#"> 
<select id="months"> 
<option value="">Month</option> 
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<option value="0">January</option> 
<option value="1">February</option> 
<option value="2">March</option> 
<option value="3">April</option> 
<option value="4">May</option> 
<option value="5">June</option> 
<option value="6">July</option> 
<option value="7">August</option> 
<option value="8">September</option> 
<option value="9">0ctober</option> 
<option value="10">November</option> 
<option value="11">December</option> 
</select> 
&nbsp; 
<select id="days"> 
<option>Day</option> 
</select> 
</form> 
</body> 
</html> 


脚本 6-5 在 弹出 菜单 中 选择 一 个 值 ， 然 后 就 可 以 创建 第 二 个 弹出 菜单 的 内 容 


window.onload = initForm; 





function initForm() { 
document .getElementById("months").selectedIndex = 0; 
document .getElementById("months").onchange = populateDays; 


} 


function populateDays() { 
var monthDays = new Array(31,28, 31,30, 31, 30, 31, 31, 30, 31, 30,31); 
var monthStr = this.options[this.selectedIndex].value; 


if (monthStr !- "") { 
var theMonth = parseInt(monthStr); 


document.getElementById("days").options.length - 0; 
for (var i=0; i<monthDays[theMonth];i++) ( 
document .getElementById("days").options[i] = new Option(i+1); 
} 
} 
} 


> 动态 地 改变 菜单 

1. var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31); 

这 个 新 数组 包含 对 应 于 12 个 月 的 12 个 数字 , 即 每 个 月 的 正确 天 数 。 这 个 数组 存储 在 变量 monthDays 中 。 

2. var monthStr = this.options[this.selectedIndex].value; 

我 们 使 用 this (用 户 在 第 一 个 汪 单 中 选择 的 月 份 ) 从 菜单 中 获得 值 ， 并 且 将 它 存 储 在 monthstr 中 。 

3. if (monthStr != "") { 

var theMonth = parseInt(monthStr) ; 

如 果 monthStr 的 值 是 "", 那么 用 户 就 是 在 菜单 中 选择 了 单词 Month, ， 而 不 是 月 份 名 。 这 些 代 码 的 
作用 是 检查 monthstr 的 值 是 否 不 是 "" ， 如 果 这 个 条 件 为 真 ， 那 么 用 parseInt 方法 将 monthStr 转换 为 
数字 ， 并 且 将 变量 theMonth 设置 为 这 个 结果 。 
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4. document.getElementById("days").options.length = 0; 
for(var i=0; i«monthDays[theMonth]; i++) { 
document.getElementById("days").options[i] = new Option(i+1); 

在 改变 Day 荣 单 时 ， 首 先 将 它 的 选项 长 度 设 置 为 零 , 这 会 消除 以 前 操作 的 影响 。 这 个 循环 简单 地 
遍历 所 选 月 份 中 的 每 一 天 ， 为 每 一 天 在 菜单 中 添加 一 个 新 选项 。 传 递 给 Option 的 是 计 1， 这 使 它 显示 
1 ~31， 而 不 是 0 ~30。 

V 提示 

口 monthDays 数组 包含 每 个 月 的 天 数 ， 如 果 不 是 国 年 的 话 ， 这 种 方式 就 没 问 题 。 要 想 让 脚本 能 

处 理 半 年 ， 就 需要 改变 monthDays 中 二 月 的 值 。 


6.3 ”建立 必须 填 与 的 字段 


在 填写 表单 时 ， 可 能 希望 指定 用 户 必 须 填 写 某 些 字 段 ， 然 后 才能 提交 表单 。 可 以 使 用 JavaScript 
检查 某 些 或 所 有 字段 是 否 已 经 填写 了 。 在 这 个 示例 中 ,我 们 使 用 HTML, CSS 和 JavaScript ( 分别 是 
脚本 6-6、 脚 本 6-7 和 脚本 6-8 ) 通过 红色 的 边框 和 黄色 的 内 部 颜色 突出 显示 未 填写 的 字段 。 检 查 在 用 
户 单 击 表单 的 Submit 按钮 时 进行 。 


脚本 6-6 ”密码 检查 示例 的 HTML 


<!DOCTYPE html> 
<html> 
<head> 
<title>Password Check</title> 
<link rel="stylesheet" href="script03.css"> 
<script src="script03.js"></script> 
</head> 
<body> 
<form action="#"> 
<p><label for="userName">Your name:<input type="text" size="30" id="userName" class="reqd"></label> </p> 
<p><label for="passwd1">Choose a password: <input type="password" id-"passwdi" class="reqd"></label></p> 
<p><label for="passwd2">Verify password:<input type="password" id-"passwd2" class="reqd passwd1"> 
</label></p> 
<p><input type="submit" value="Submit">&nbsp;<input type="reset"></p> 
</form> 
</body> 
</html> 

































































脚本 6-7 这 段 CSS 为 无 效 的 表单 元 素 设置 样式 


body { 
color: #000; 
background-color: #FFF; 
} 


input.invalid { 
background-color: #FF9; 
border: 2px red inset; 


} 


label.invalid { 
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color: #F00; 
font-weight: bold; 
} 


脚本 6-8 这 个 脚本 是 本 章 中 其 余 所 有 示例 的 基础 ， 可 以 使 用 这 个 框架 添加 额外 的 有 效 性 检查 


window.onload = function() { 
document. forms[0].onsubmit = validForm; 
} 


function validForm() { 
var allGood = true; 
var allTags = document. forms[0].getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 


if (!validTag(allTags[i])) { 
allGood = false; 
} 
} 


return allGood; 





function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length;j++) { 
outClass += validBasedOnClass(allClasses[j]) +" "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
thisTag.focus(); 
if (thisTag.nodeName == "INPUT") { 
thisTag.select(); 


return false; 


} 


return true; 


function validBasedOnClass(thisClass) { 
var classBack = ""; 


switch(thisClass) { 
case ""; 
case "invalid": 
break; 
case "reqd": 
if (allGood 8& thisTag.value -- "") ( 
classBack = "invalid "; 


classBack += thisClass; 
break; 
default: 

classBack += thisClass; 

} 

return classBack; 

} 
} 
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这 种 检查 方法 的 基本 原理 如 下 : HTML 中 的 class 属性 表示 我 们 希望 JavaScript 执行 哪 种 检查 。 
如 果 检 查 失 败 ， 就 在 class 属性 的 列表 中 添加 invalid。 这 样 做 会 出 现 两 种 现象 : (1) 表单 提交 失败 ; 
(2) 脚本 6-7 中 的 CSS 改变 这 个 字段 在 页 面 上 的 外 观 〈 见 图 6-5 )。 
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Your name: Tom 


Choose a password: [ — — — —] 


Verify password: sess 


Submit Reset 














6-5 通过 突出 显示 背景 色 让 用 户 知道 某 个 字段 有 问题 ， 从 而 确保 用 户 正确 输入 密码 
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1. window.onload = function() { 


document.forms[0].onsubmit = validForm; 

当 页 面 首次 加 载 时 ， 匿 名 函数 会 查找 页 面 中 的 第 一 个 表单 。 对 于 这 个 表单 ， 它 为 表单 的 onsubmit 
添加 一 个 事件 处 理 程序 ， 调 用 validForm。 当 onsubmit 处 理 程序 返回 false 值 时 ， 表 单 就 不 会 被 传递 回 
服务 器 。 只 有 在 返回 true 值 时 ， 服 务 右 才 会 收 到 表单 ( 因此 ， 运 行动 作 属 性 中 存储 的 服务 器 端 脚 本 )。 

2.var allTags = document.forms[0]getElementsByTagName("*"); 

document.getElementsByTagName("*") 是 非常 有 用 的 一 一 星 号 让 JavaScript 返回 一 个 包含 页 面 上 所 
有 标签 的 数组 。 如 果 能 使 用 这 个 函数 获取 特定 元 素 内 的 所 有 标签 就 更 方便 了 ， 此 处 就 是 这 种 情况 。 
这 一 行 代码 查找 页 面 第 一 个 表单 内 部 的 所 有 标签 。 然 后 ， 就 可 以 遍历 all Tags 数组 来 寻找 感 兴趣 的 
标签 。 

3. for (var i=0; i<allTags.length;i++) { 

if (!validTag(allTags[i])) { 
allGood = false; 

这 个 循环 在 allTags 中 进行 搜索 ,而 许 条 件 语句 调用 validTag() 函 数 ， 这 会 检查 每 个 标签 ， 了 解 
是 否 有 什么 东西 阻止 表单 提交 这 个 页 面 。 传 递 给 validTag() 函 数 的 是 allTags[i], ， 也 就 是 当前 正在 处 
理 的 对 象 。 如 果 任 何 标签 导致 validTag() 返 回 false， 就 将 allGood 设置 为 false。 但 是 ， 即 使 已 经 出 
现 了 false， 我 们 仍然 继续 循环 遍历 所 有 标签 。 

4. return allGood; 

现在 返回 allGood， 以 此 表明 是 否 应 该 继续 提交 表单 。 

5. function validTag(thisTag) { 

创建 validTag() 函 数 ， 并 且 让 它 接 收 thisTag fH. 

6. var allClasses = thisTag.className.split(" "); 

对 于 每 个 标签 ， 我 们 希望 检查 每 个 class 属性 〈 请 记 住 ，class 可 以 设置 为 多 个 属性 )。 创 到 
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allClasses 数组 并 且 用 thisTag.className.split(" ") 设 置 它 。 这 个 函数 会 按照 传递 给 它 的 字符 串 ， 
将 字符 串 分 割 为 数组 。 在 这 里 , 分割 符 字符 串 是 一 个 空格 , 所 以 它 会 将 字符 串 "this that and the other" 
转换 为 一 个 包含 5 个 元 素 的 数组 : this, that, and, the 和 other. 

我 们 希望 检查 每 个 class 属性 ， 因 为 class 表示 我 们 希望 对 每 个 表单 字段 进行 什么 处 理 。 在 这 个 
示例 中 , 我 们 关心 的 一 个 值 是 reqd, 这 表示 必须 填写 这 个 字段 。 如 果 任 何 表单 字段 具有 class fH reqd, 
那么 它 必 须 包 含 某 些 值 。 

7. for (var j=0; j<allClasses.length;j++) { 

outClass += validBasedOnClass(allClasses[j]) + " "; 

这 个 循环 使 用 j 作为 循环 变量 ， 因 为 外 层 的 循环 已 经 使 用 了 io XF allClasses 中 的 每 个 class 
属性 循环 一 次 。 

对 于 每 个 类 , 执行 outClass += validBasedOnClass(allClasses[j]) + "";。 这 会 调用 validBasedOn 
Class () PK? (后 面 会 解释 这 个 函数 )， 并 且 传 递 当前 查看 的 类 。 这 个 函数 返回 某 些 东西 ， 这 些 东西 加 
上 一 个 空格 之 后 追加 到 outClass 变量 中 。 

8. thisTag.className = outClass; 

在 结束 allClasses 循环 时 ， 我 们 获得 outClass 的 内 容 并 且 将 它 放 进 thisTag.className, 3x 
这 个 表单 字段 当前 的 class 属性 。 这 是 因为 在 进行 处 理 期 间 class 可 以 改变 ， 稍 后 就 会 看 到 这 种 情况 。 

9. if (outClass.indexOf("invalid") > -1) { 

在 新 的 class 属性 中 可 能 返回 的 值 之 一 是 单词 invalid， 所 以 要 检查 它 。 如 果 在 新 的 类 中 找到 了 
invalid， 就 说 明 有 问题 ， 因 此 执行 对 应 的 操作 。 

10. thisTag.focus(); 

如 果 这 个 表单 字段 可 以 获得 焦点 〈 还 记得 吗 ， 我 们 在 第 5 章 中 讨论 过 焦点 )， 那 么 希望 将 焦点 放 
进 这 个 字段 ， 这 一 行 就 完成 这 个 任务 。 这 是 让 用 户 知 道 哪个 字段 有 问题 的 一 种 方法 。 

11. if (thisTag.nodeName == "INPUT") { 

thisTag.select(); 

这 些 代码 的 基本 意思 是 ,“ 当 前 查看 的 这 个 标签 是 <input> 标 签 吗 ? 如 果 是 ， 就 选择 它 的 值 ， 让 用 
户 能 够 更 轻松 地 修改 它 。 

12. return false; 

我 们 仍然 在 “返回 无 效 元 素 ” 块 中 ， 所 以 将 false 返回 到 进行 调用 的 地 方 。 

13. return true; 

如 果 所 有 一 切 都 运行 良好 并 且 有 效 ， 就 返回 true. 

14. function validBasedOnClass(thisClass) { 
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var classBack = 
创建 新 的 validBased0nClass() 函 数 ， 并 且 让 它 接 收 thisClass 值 。 接 下 来 创建 classBack 变量 ， 
并 且 将 它 初始 化 为 空 。 这 个 变量 将 包含 要 返回 的 类 ， 也 就 是 我 们 硕 望 发 送 回 的 值 。 
15. switch(thisClass) { 
switch 语句 检查 (在 thisClass 中 ) 传递 给 它 的 一 个 class 





























DE 


E， 并 根据 这 个 属性 执行 对 应 的 








zal 
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16. case 
case "invalid": 


break; 




















如 果 thisClass 是 空 的 或 是 invalid， 那 么 就 跳出 条 件 语句 ， 和 否则 继续 。 


17. case "reqd": 
if (allGood && thisTag.value == "")( 
classBack = "invalid "; 
} 
classBack += thisClass; 


break; 


























如 果 正 在 处 理 的 属性 是 reqd, allGood 是 true, 而 且 当 前 标签 的 当前 值 是 "" ( 即 空 字符 串 ), 那么 
将 classBack 设置 为 invalid， 因 为 这 说 明 有 问题 ， 我 们 希望 通知 用 户 。 在 此 之 后 ， 无 论 是 否 有 问题 ， 
我 们 都 将 当前 的 类 追加 到 classBack 中 ， 使 它 不 会 丢失 。 

















18. default: 
classBack += thisClass; 



































如 果 上 面 的 分 支 与 发 生 的 情况 都 不 匹配 ， 就 会 执行 default 块 。 当 发 生 这 种 情况 时 ， 就 说 明 当 前 
处 理 的 类 是 我 们 不 关心 的 ， 所 以 只 需要 将 它 追 加 到 classBack 中 ， 而 不 必 担 心 其 他 事情 。 


19. return classBack; 

最 后 ， 返 回 classBack. 

v 提示 

口 好 的 UI 设计 只 会 在 一 个 页 面 上 设置 一 个 表单 ， 





因此 我 们 这 里 的 脚本 是 按照 只 需要 查看 第 一 个 








也 是 唯一 一 个 表单 来 的 。 如 果 你 想 为 页 面 添 加 多 个 网 页 验证 表单 ， 那 么 别 忘 记 修 改 脚本 。 





6.4 根据 其 他 字段 对 字段 进行 检查 








经 常 需要 根据 另 一 个 字段 对 一 个 字段 进行 检查 ,尤其 是 在 要 求 用 户 设 置 密码 时 。 为 了 确保 密码 正 
确 ， 和 希望 用 户 输入 密码 两 次 ， 并 确保 两 次 的 输入 完全 相同 。 
这 个 示例 重用 了 脚本 6-6 C HTML ) 和 脚本 6-7 ( CSS), 而且 只 需 在 脚本 6-8 中 添加 几 行 JavaScript 























( 见 脚 本 6-9 )， 使 这 个 脚本 具有 额外 的 核对 功能 。 结 
显示 红色 的 边框 。 


























见 图 6-6。 同 样 ， 当 检查 失败 时 ， 无 效 的 字段 会 














图 6-6 ”对 两 个 密码 字段 进行 核对 ， 确 保 它 们 的 内 容 是 相同 的 。 如 果 不 匹 配 ， 就 显示 图 中 的 效果 
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脚本 6-9 使 用 这 个 脚本 比较 两 个 字段 的 值 ， 检 查 它 们 是 否 匹配 


window.onload = function() { 
document .forms[0].onsubmit = validForm; 


} 


function validForm() { 
var allGood = true; 
var allTags = document. forms[0].getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 
} 


return allGood; 





function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 
} 
return false; 


} 


return true; 


function validBasedOnClass(thisClass) { 
var classBack = ""; 


switch(thisClass) { 
case "": 
case "invalid": 
break; 
case "reqd": 
if (allGood 8& thisTag.value == "") { 
classBack = "invalid "; 
} 
classBack += thisClass; 
break; 
default: 
if (allGood 8& !crossCheck(thisTag,thisClass)) { 
classBack = "invalid "; 


) 


classBack += thisClass; 
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所 以 这 个 JavaScript 脚本 知道 它 必 须根 据 第 一 个 密码 字段 核对 第 二 个 密码 字段 。 这 在 条 件 语 句 的 
default 块 中 进行 处 理 。 如 果 allGood 是 true H. crossCheck() Kt (UL FE) 发 现 了 问题 ( 并 返 


} 


return classBack; 
function crossCheck(inTag,otherFieldID) { 
if (!document.getElementById(otherFieldID)) { 


return false; 


return (inTag.value == document.getElementById(otherFieldID) .value) ; 





> 根据 另 一 个 字段 对 一 个 字段 进行 检查 








1. if (allGood && !crossCheck(thisTag,thisClass)) { 
classBack = "invalid "; 


现在 ,我们 要 检查 两 个 密码 字段 是 否 相同 。 因 为 第 二 个 密码 字段 的 类 包含 passwd1( 见 脚本 6-6 ), 




















Iz] 





false )， 那 么 就 将 classBack 设置 为 invalid. 





2. function 
crosscheck (inTag,otherFieldID) { 
if (!document.getElementById(otherFieldID)) { 
return false; 
} 
return (inTag.value == document.getElementById(otherFieldID).value); 
这 是 crossCheck() 函 数 。 它 接收 当前 标签 和 检查 所 针对 的 男 一 个 字段 的 id。 在 这 个 示例 中 ， 当 前 





标签 是 passwd2 <input> ， 另 一 个 字段 的 id 是 passwd1。 如 果 另 一 个 字段 不 存在 ， 就 无 法 进行 检查 ， 这 
就 说 明 有 问题 ， 所 以 函数 返回 false。 和 否则 ， 这 两 个 字段 都 存在 ， 所 以 可 以 比较 它们 的 值 : 如 果 相 同 ， 
就 返回 true; 如 果 不 同 ， 就 返回 false。 











V 提示 
口 这 个 脚本 并 没有 根据 主 密码 数据 库 检 查 用 户 输入 的 密码 是 否 有 效 , 这 种 任务 需要 服务 器 端 脚本 
来 实现 ， 它 只 是 确保 用 户 两 次 输入 的 密码 是 相同 的 。 














6.5 标识 有 问题 的 字段 


将 输入 字段 的 边框 改 为 红色 是 很 不 错 的 ， 但 是 如 果 能 够 让 有 问题 的 字段 再 醒目 一 点 儿 就 更 好 了 。 

















在 这 个 示例 中 ,你 将 学 习 如 何 将 字段 旁边 的 标签 设置 为 红色 的 粗 体 字 ， 从 而 使 出 问题 的 字段 更 加 明显 


( 见 





图 6-7 )。 E£, HTML 和 CSS 文件 没有 改动 (仍然 是 脚本 6-6 和 脚本 6-7 )。 在 脚本 6-10 F, 我们 











在 脚本 6-9 中 添加 了 几 行 JavaScript 代码 以 进一步 突出 显示 输入 错误 。 
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ec ttps://didropboxusercontent.com © 


Your name: [Tom 
Choose a password: Pee 
Verify passwond: (a) 


Submit Reset 














图 6-7” 当 出 现 问题 时 ， 可 以 让 字段 的 标签 成 为 红色 的 粗 体 字 ， 字 段 本 身 也 改变 样式 
脚本 6-10 ” 当 发 现 错误 时 ， 这 个 脚本 会 突出 显示 错误 的 字段 的 标签 


window.onload = function() { 
document. forms[0].onsubmit = validForm; 
} 





function validForm() { 
var allGood = true; 
var allTags = document. forms[0].getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 


} 


return allGood; 


function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 


return false; 


} 


return true; 


function validBasedOnClass(thisClass) { 
var classBack = ""; 


switch(thisClass) { 
case "": 
case "invalid": 
break; 
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case "reqd": 
if (allGood 8& thisTag.alue == "") { 
classBack = "invalid "; 
} 
classBack += thisClass; 
break; 
default: 


if (allGood 8& !crossCheck(thisTag,thisClass)) { 
classBack = "invalid "; 


} 


classBack += thisClass; 


} 


return classBack; 


function crossCheck(inTag,otherFieldID) { 
if (!document.getElementById(otherFieldID)) { 
return false; 


return (inTag.value == document.getElementById(otherFieldID).value); 
} 
} 
} 


function invalidLabel(parentTag) { 
if (parentTag.nodeName == "LABEL") { 
parentTag.className += " invalid"; 


} 
} 


> 标识 有 问题 的 表单 字段 








1. invalidLabel(thisTag.parentNode) ; 

这 行 代码 被 添加 到 validTag() 内 的 无 效 检查 中 。 如 果 当 前 字段 没有 通过 有 效 性 检查 ， 那 么 我 们 
希望 检查 是 否 能 够 使 包围 这 个 元 素 的 标签 也 成 为 无 效 的 。 为 此 , 要 调用 新 的 invalidLabel() 函 数 (下 
面 有 解释 ) 并 且 将 当前 标签 的 父 标签 传递 给 它 。 也 就 是 说 ， 如 果 passwdi 输入 字段 出 了 问题 ， 那 么 
我 们 希望 给 这 个 标签 和 包围 它 的 label 标签 都 分 配 class 属性 invalid, WPA, 一旦 发 现 passwd1 输 
入 字段 出 了 问题 ， 就 将 它 的 父 标签 ( label 标签 ) 传递 给 invalidLabel()， 从 而 检查 是 否 能 够 将 它 
标记 为 无 效 的 。 

2. function invalidLabel(parentTag) { 


if (parentTag.nodeName == "LABEL") { 
parentTag.className += " invalid"; 


这 个 函数 接受 一 个 标签 并 且 检 查 这 个 标签 (tag ) 是 否 是 一 个 标签 (label )。 如 果 是 ， 就 在 它 的 类 
中 添加 invalid 属性 。 

现在 , 如 果 试 图 提交 表单 ,而 表单 上 有 错误 , 就 会 看 到 有 问题 的 字段 的 标签 变 成 了 红色 的 粗 体 字 。 
纠正 错误 ， 再 次 提交 表单 ， 标 签 就 会 恢复 为 黑色 。 


6.6 准备 进行 表单 验证 


关于 前 几 个 示例 中 构建 的 脚本 ,有 意思 的 一 点 是 :脚本 在 很 大 程度 上 独立 于 使 用 它 的 HTML 页 面 。 
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换 名 话说， 可 以 改 用 一 个 完全 不 同 的 页 面 ， 其 中 包含 完全 不 同 的 表单 ， 而 且 只 需 对 脚本 略 作 修改 ， 就 
可 以 执行 你 需要 的 所 有 验证 任务 。 

例如 ， 看 一 下 图 6-8， 这 是 一 个 表单 的 简化 版 本 ， 用 户 可 以 使 用 它 定制 要 购买 的 汽车 。 这 个 表单 包 
含 各 种 选项 和 界面 元 素 , 包括 单 选 按 钮 、 菜 单 、 复 选 框 和 文本 字段 , 它们 都 需要 检查 数据 输入 是 否 正确 。 
这 个 表单 的 HTML 见 脚本 6-11, CSS 见 脚本 6-12。 在 本 章 的 其 余 示例 中 , 我 们 将 一 直 使 用 这 个 HTML. 


firefox Lo. ©) 本 




















Car Picker [+] 
€ at dropboxu c B-boy? + A D- 
Car Picker 
Email Address: 
Colors Choose a color ~ 
Options: Sunroof (Two door only) Power Windows 
Doors Two Four 


Enter your Zip code or pick the dealer nearest you 
California~Lemon Grove ^ 
California~Lomita 
California~Long Beach 

Zip California-Los Alamitos ~ 


Submit | | Reset | 


Ly 


图 6-8 Car Picker 表单 使 用 了 文本 字段 、 弹 出 菜单 、 复 选 框 和 单 选 按钮 ， 这 些 都 是 常用 的 表单 元 素 















































脚本 6-11 这 是 Car Picker 示例 的 完整 HTML 代码 页 面 


<!DOCTYPE html» 
<html> 
<head> 
<title>Car Picker</title> 
<link rel="stylesheet" href="script06.css"> 
<script src="script06.js"></script> 
</head> 
<body> 
<h2 class="centered">Car Picker</h2> 
<form action="someAction.cgi"> 
<p><label for="emailAddr">Email Address: <input id="emailAddr" type="text" size="30" class="reqd email"> 
*</label></p> 
<p>Colors: 
<select id="color" class="reqd"> 
<option value-"" selected>Choose a color</option> 
<option value="Red">Red</option> 
<option value="Green">Green</option> 
<option value="Blue">Blue</option> 
</select> 
</p> 
<p>Options: 
«label for="sunroof"><input type="checkbox" id="sunroof" value-"Yes"»Sunroof (Two door only)</label> 
<label for="pWindows"><input type="checkbox" id="pWindows" value="Yes">Power Windows</label> 
</p> 
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<p>Doors : &nbsp; &nbsp; 
<label for="twoDoor"><input type="radio" id="twoDoor" name="DoorCt" value="twoDoor" class="radio"> 
Two</label> 
«label for="fourDoor"><input type="radio" id-"fourDoor" name="DoorCt" value="fourDoor" class="radio"> 
Four</label> 
</p> 
<p> 
<label for="zip">Enter your Zip code or pick the dealer nearest you:<br> 
Zip: <input id-"zip" type="text" size-"5" maxlength="5" class="isZip dealerList"> 
</label> 
«select id-"dealerlist" size="4" class="zip"> 
<option value="California--Lemon Grove">California--Lemon Grove</option> 
<option value="California--Lomita">California--Lomita</option> 
<option value="California--Long Beach">California--Long Beach</option> 
<option value="California--Los Alamitos">California--Los Alamitos</option> 
<option value="California--Los Angeles">California--Los Angeles</option> 
</select> 
</p> 
<p><input type="submit" value="Submit">&nbsp;<input type="reset"></p> 
</form> 
</body> 
</html> 


脚本 6-12 这 里 显示 的 某 些 样式 只 能 以 后 使 用 


body { 
color: #000; 
background-color: #FFF; 


} 


input.invalid { 
background-color: #FF9; 
border: 2px red inset; 


} 


label.invalid { 
color: #F00; 
font-weight: bold; 


} 
select { 

margin-left: 80px; 
} 
input { 

margin-left: 30px; 
} 


input+select, input+input { 
margin-left: 20px; 
} 


.centered { 
text-align: center; 
} 


JavaScript 文件 ( 见 脚 本 6-13 ) 是 在 本 章 前 面 使 用 的 脚本 基础 上 构建 的 。 我 们 在 脚本 中 添加 了 几 
行 代码 来 处 理 新 的 界面 元 素 , 脚本 的 其 他 部 分 是 相同 的 。 在 这 个 示例 中 , 你 将 看 到 为 了 进行 更 多 验证 ， 
需要 在 脚本 中 添加 什么 代码 ， 而 后 续 的 示例 将 更 深入 地 研究 特定 类 型 的 表单 元 素 。 
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脚本 6-13 ”这 个 脚本 在 switch/case 条 件 结构 中 添加 了 几 个 代码 块 ， 后 面 的 示例 将 利用 这 些 结构 


window.onload = function() { 
document .forms[0].onsubmit = validForm; 
} 


function validForm() { 
var allGood = true; 
var allTags = document. forms[0].getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 


} 


return allGood; 


function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 
} 
return false; 


} 


return true; 


function validBasedOnClass(thisClass) { 
var classBack = "" 


switch(thisClass) { 
case "": 
case "invalid": 
break; 
case "reqd": 
if (allGood 8& thisTag.value == "") { 
classBack = "invalid "; 


classBack += thisClass; 
break; 

case "radio": 

case "isNum": 

case "isZip": 

case "email": 
classBack += thisClass; 
break; 

default: 
if (allGood 8& !crossCheck(thisTag,thisClass)) { 

classBack = "invalid "; 

} 
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classBack += thisClass; 


} 


return classBack; 


function crossCheck(inTag,otherFieldID) { 
if (!document.getElementById(otherFieldID)) { 
return false; 


return (inTag.value !- "" || document.getElementById(otherFieldID).value != "" 


} 
} 


function invalidLabel(parentTag) { 
if (parentTag.nodeName == "LABEL") { 
parentTag.className += " invalid"; 





p^ 对 具有 许多 元 素 的 表单 进行 验证 


); 








1. case "radio": 


case "isNum": 

case "isZip": 

case "email": 
classBack += thisClass; 
break; 


通过 在 validBasedOnClass() PACH switch/case 条 件 结构 中 添加 额外 的 代码 块 ,我 们 使 这 个 脚本 
能 够 检查 更 多 的 字段 和 更 多 的 情况 。 我 们 在 分 支 列表 中 添加 了 radio. isNum, isZip FI emails SEE 








这 个 示例 中 不 对 它们 进行 验证 , 但 是 在 以 后 进行 验证 时 ,我 们 不 希望 这 些 结构 造成 问题 ， 








所 以 对 于 每 


个 还 未 处 理 的 属性 ， 要 在 switch/case 处 理 的 属性 列表 中 保留 它们 。 因 为 前 3 个 代码 块 中 没有 指令 ， 
所 以 它们 都 会 执行 email 分 支 中 的 代码 ， 这 里 的 代码 仅仅 将 当前 检查 的 属性 添加 到 classBack 中 。 











2. return (inTag.value !- "" || document.getElementById(otherFieldID).value !- 


US 


crossCheck() 中 的 这 一 行 做 了 一 点 儿 改动 。 这 里 不 再 比较 两 个 字段 是 否 相等 ， 而 是 检查 是 否 至 少 





















































已 经 设置 了 两 个 字段 之 一 ( 这 是 为 表单 末尾 的 ZIP 编码 字段 和 列表 元 素 准备 的 )。 WRH 
字段 包含 值 ， 那 么 返回 true; 如 果 它 们 都 不 包含 值 ， 那 么 返回 false. 


6.7 ”人 处理 单 选 按钮 









































t 中 至 少 一 个 


单 选 按钮 是 一 种 界面 元 素 ， 它 告诉 用 户 在 一 组 选项 中 选择 一 个 选项 ( 而 且 只 能 选择 一 个 )。 如 果 
需要 从 多 个 选项 中 选择 一 个 ， 就 应 该 使 用 单 选 按钮 。 如 图 6-9 所 示 ， 这 个 表单 让 假定 购买 汽车 的 顾客 














用 单 选 按钮 选择 两 门 汽车 或 四 门 汽车 。 在 这 种 情况 下 ， 只 能 选择 这 些 选 项 之 一 ， 而 且 必 须 作 出 选择 。 














图 6-9 ” 单 选 按钮 是 让 用 户 在 一 组 选项 中 只 选择 一 个 选项 的 最 佳 方法 
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如 脚本 6-14 所 示 , 检查 是 否 选 择 了 一 个 按钮 并 不 需要 很 多 脚本 代码 。 我 们 采用 的 方法 是 , 遍历 每 
个 按钮 并 且 检 查 它 的 状态 ， 如 果 没 有 选择 按钮 ， 就 将 单 选 按 钮 的 标签 和 按钮 本 身 转换 为 红色 的 粗 体 。 
脚本 6-14 ”只 能 选择 一 个 单 选 按钮 ， 而 且 这 段 JavaScript 会 执行 界面 规则 


window.onload = function() { 
document .forms[0].onsubmit = validForm; 
} 

















function validForm() { 
var allGood = true; 
var allTags = document. forms[0].getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 


} 


return allGood; 





function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 


return false; 


} 


return true; 


function validBasedOnClass(thisClass) { 
var classBack = ""; 


switch(thisClass) { 
case "": 
case "invalid": 
break; 
case "reqd": 
if (allGood 8& thisTag.value == "") { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
case "radio": 
if (allGood && !radioPicked(thisTag.name)) { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
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case "isNum": 
case "isZip": 
case "email": 
classBack += thisClass; 
break; 
default: 
if (allGood 8& !crossCheck(thisTag,thisClass)) { 
classBack = "invalid "; 
} 
classBack += thisClass; 


} 


return classBack; 


function crossCheck(inTag,otherFieldID) { 
if (!document.getElementById(otherFieldID)) { 
return false; 
j 


return (inTag.value !- "" || document.getElementById(otherFieldID).value !- ""); 
} 


function radioPicked(radioName) { 
var radioSet = document.forms[0][radioName] ; 


if (radioSet) { 
for (k=0; k<radioSet.length; k++) { 
if (radioSet[k].checked) { 
return true; 
} 


} 


return false; 
} 
} 
} 


function invalidLabel(parentTag) { 


if (parentTag.nodeName == "LABEL") { 
parentTag.className += " invalid"; 


} 
> 确保 用 户 选择 一 个 单 选 按钮 








1. if (allGood && !radioPicked(thisTag.name) ){ 
classBack = "invalid "; 
这 行 代码 在 switch/case 条 件 结构 的 radio 块 中 。 我 们 希望 确保 至 少 选择 一 个 单 选 按钮 ， 新 的 
radiopPicked() 函 数 处 理 这 个 问题 。 如 果 它 返回 false， 那 么 就 将 classBack 设置 为 invalid. 


2. function radioPicked(radioName) { 

















var radioSet = document. forms[0][radioName ] 

开始 新 的 radiopPicked() 函 数 ， 并 且 对 radioSet 变量 进行 初始 化 。 

这 个 函数 接受 单 选 按 钮 组 的 名 称 ,这 个 示例 中 就 是 DoorCt ， 见 脚本 6-11。 注意 , 这 不 是 当前 标签 
的 id, class 或 我 们 常常 看 到 的 任何 东西 ,而 是 它 的 name。<input> 标 签 的 name 属性 使 HTML 知道 哪 


些 单 选 按钮 分 组 在 一 起 。 也 就 是 说 , 所 有 具有 相同 name 属性 的 <input> 标 签 都 属于 同一 个 单 选 按 钮 组 。 
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然后 ， 尝 试 将 radioset 设置 为 正在 查看 的 表单 中 单 选 按钮 组 的 名 称 。 如 果 找 到 这 个 单 选 按钮 组 ， 
radioSet 就 会 包含 一 个 值 。 

3. if (radioSet) { 

for (k=0; k«radioSet.length; k++) { 
if (radioSet[k].checked) { 
return true; 

如 果 radioset 包含 一 个 值 , 那 我 们 就 知道 了 想 要 检查 的 单 选 按钮 组 。 接 下 来 启用 另 一 个 循环 检查 
每 个 单 选 按钮 。 当 发 现 一 个 单 选 按钮 被 选中 时 ， 就 返回 true， 因 为 这 就 是 我 们 希望 保证 的 。 

4. return false; 

如 果 到 达 了 循环 末尾 的 这 个 语句 ,那么 已 经 检查 了 整个 单 选 按钮 组 而 且 没 有 单 选 按钮 被 选中 。 在 
这 种 情况 下 ， 返 回 false， 并 且 改 变 单 选 按钮 的 标签 并 将 单 选 按钮 的 文本 改 为 红色 的 粗 体 。 


68 用 一 个 字段 设置 另 一 个 字段 


在 表单 上 常见 的 一 种 情况 是 ， 如 果 用 户 作出 选择 ， 那 么 这 个 选择 会 影响 表单 上 其 他 字段 的 值 。 
例如 ， 假 设 只 有 在 两 门 汽车 上 才能 选择 遮阳 敌 (sunroof) 选项 。 处 理 这 个 问题 有 两 种 方法 。 第 一 种 
方法 是 检查 输入 ， 如 果 用 户 作 出 了 错误 的 选择 ， 就 弹出 警告 对 话 框 。 但 是 ， 更 好 的 方法 是 蔡 用 户 输 
入 。 所 以 ， 如 有 果 用 户 选 择 了 遮阳 禾 ， 脚 本 就 会 自动 选中 两 门 选 项 ， 如 图 6-10 所 示 。 脚 本 6-15 演示 
了 具体 做 法 。 
































































































































Options: [v] Sunroof (Two door only) Power Windows 





Doors: Two O Four 
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脚本 6-15 ”处 理 用 户 选 择 的 一 种 好 方法 是 ,根据 用 户 作出 的 其 他 选择 自动 设置 字段 输入 


window.onload = initForm; 











function initForm() { 
document .forms[0].onsubmit = validForm; 
document.getElementById("sunroof").onclick = doorSet; 


} 


function validForm() { 
var allGood = true; 
var allTags = document.forms[0].getElementsByTagName("*"); 


for (var i=0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 
} 


return allGood; 


function validTag(thisTag) { 
var outClass = ""; 
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var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 


return false; 


) 


return true; 


function validBasedOnClass(thisClass) { 
var classBack - ""; 


switch(thisClass) ( 

case "": 

case "invalid": 
break; 

case "reqd": 
if (allGood 8& thisTag.value == "") ( 

classBack = "invalid "; 

j 


classBack += thisClass; 
break; 
case "radio": 
if (allGood && !radioPicked(thisTag.name)) { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
case "isNum": 
case "isZip": 
case "email": 
classBack += thisClass; 
break; 
default: 
if (allGood 8& !crossCheck(thisTag,thisClass)) { 
classBack = "invalid "; 


classBack += thisClass; 
return classBack; 
function crossCheck(inTag,otherFieldID) ( 
if (!document.getElementById(otherFieldID)) { 


return false; 


return (inTag.value !- "" || document.getElementById(otherFieldID).value !- ""); 
j 


function radioPicked(radioName) { 
var radioSet = document.forms[0][radioName]; 


if (radioSet) ( 
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for (k=0; k<radioSet.length; k++) { 
if (radioSet[k].checked) { 
return true; 


} 


return false; 


} 
} 


function invalidLabel(parentTag) { 
if (parentTag.nodeName == "LABEL") { 
parentTag.className += " invalid"; 


} 
} 
} 


function doorSet() { 
if (this.checked) { 
document .getElementById("twoDoor").checked = true; 





} 

> 自动 设置 字段 值 

1. document.getElementById("sunroof").onclick = doorSet; 

这 行 代 码 添加 在 initForm() 中 。 当 用 户 单 击 遮阳 答复 选 框 时 ， 将 调用 doorSet () 函 数 。 


2. function doorSet() { 
if (this.checked) { 
document .getElementById("twoDoor").checked = true; 


这 个 新 函数 检查 是 否 选中 了 遮阳 舌 选 项 。 如 果 是 ， 就 将 twoDoor 单 选 按钮 设置 为 true。 如 果 是 取 
消 选 中 遮阳 篷 复 选 框 ， 那 么 不 做 任何 处 理 。 
V 提示 
口 你 可 能 会 注意 到 ， 这 里 没有 检查 用 户 是 否 取 消 选 中 遮阳 自选 项 ， 然 后 重新 设置 fourDoor 单 选 
按钮 。 这 个 功能 留 给 读者 作为 练习 。 


6.9 检验 Zip 编码 


那些 古怪 的 用 户 可 能 在 表单 中 输入 几乎 任何 东西 ， 所 以 需要 确保 用 户 在 Zip 编码 字段 中 输入 的 内 
容 只 包含 数字 CLE 6-11 )。 脚 本 6-16 演示 具体 做 法 。 

































































Zip. |95448 Califomi- 
Submit Reset 
图 6-11 可 以 确保 用 户 输入 了 Zip 编码 或 者 从 滚动 列表 中 选择 
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脚本 6-16 ”只 需 几 行 JavaScript 就 可 以 从 Zip 编码 中 消除 错误 的 字符 
window.onload = initForm; 


function initForm() { 
document.forms[0].onsubmit = validForm; 
document.getElementById("sunroof").onclick = doorSet; 


) 


function validForm() { 
var allGood - true; 
var allTags = document.forms[0].getElementsByTagName("*"); 


for (var i-0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 


return allGood; 


function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 


return false; 


) 


return true; 


function validBasedOnClass(thisClass) { 
var classBack - ""; 


switch(thisClass) ( 

case "": 

case "invalid": 
break; 

case "reqd": 
if (allGood 8& thisTag.value == "") ( 

classBack = "invalid "; 

} 


classBack += thisClass; 
break; 
case "radio": 
if (allGood && !radioPicked(thisTag.name)) { 
classBack = "invalid "; 
j 


classBack += thisClass; 
break; 
case "isNum": 
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if (allGood 8& !isNum(thisTag.value)) { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
case "isZip": 
if (allGood 8& !isZip(thisTag.value)) { 
classBack = "invalid "; 
} 


classBack += thisClass; 
break; 
case "email": 
classBack += thisClass; 
break; 
default: 
if (allGood 8& !crossCheck(thisTag,thisClass)) { 
classBack = "invalid "; 


classBack += thisClass; 


} 


return classBack; 


function crossCheck(inTag,otherFieldID) { 
if (!document.getElementById(otherFieldID)) { 
return false; 


return (inTag.value !- "" || document.getElementById(otherFieldID).value !- ""); 
} 


function radioPicked(radioName) { 
var radioSet = document.forms[0][radioName] ; 


if (radioSet) { 
for (k=0; k<radioSet.length;k++) { 
if (radioSet[k].checked) { 
return true; 


j 
} 
} 
return false; 
} 
function isNum(passedVal) { 
if (passedVal == "") { 
return false; 
} 


for (var k=0; k<passedVal.length; k++) { 
if (passedVal.charAt(k) < "o") { 
return false; 


} 

if (passedVal.charAt(k) > "9") { 
return false; 

} 


} 


return true; 


function isZip(inZip) { 
if (inZip == "") { 
return true; 


} 
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return (isNum(inZip)); 


function invalidLabel(parentTag) { 
if (parentTag.nodeName == "LABEL") { 
parentTag.className += " invalid"; 


) 


function doorSet() { 
if (this.checked) ( 
document.getElementById("twoDoor").checked = true; 


) 


> 确保 Zip 编码 是 正确 的 


1. if (allGood && !isNum(thisTag.value)) { 
classBack = "invalid "; 


} 


classBack += thisClass; 
这 些 代码 放 在 switch/case 条 件 结构 的 isNum 块 中 。 如 果 输 入 的 是 非 数字 ,那么 isNum() 返 回 false. 
2. if (allGood && !isZip(thisTag.value)) { 
classBack = "invalid "; 
这 行 代 码 添加 在 switch/case 条 件 结构 的 iszip 块 中 。 如 果 这 个 字段 非 空 而 且 它 不 是 Zip 编码 ， 
那么 iszip() 返 回 false. 
3.if (passedVal == "") { 
return false; 
在 isNum() PAA, 如果 passedVal 是 空 的 , 那么 我 们 正在 检查 的 字段 就 不 是 数字 。 当 发 生 这 种 情 
况 时 ， 返 回 false， 表 示 出 现 了 错误 。 
4. for (var k=0; k<passedVal.length; k++) { 
现在 ,建立 一 个 循环 ， 每 次 迭代 将 k 计数 器 递增 ， 直 到 passedVal 的 长 度 。 使 用 k 是 因为 目前 我 
们 已 经 处 于 另 两 个 循环 (i Aj) 之 中 。 
5. if (passedVal.charAt(k) < "o") { 
return false; 


} 
if (passedVal.charAt(k) > "9") { 


return false; 
charAt () 函数 检查 位 置 k 上 的 字符 。 如 果 这 个 字符 小 于 “0” 或 者 大 于 “9”， 那 么 它 就 不 是 数字 ， 
所 以 要 返回 false， 表 示 输 入 是 非 数字 。 
6. return true; 


如 果 到 达 这 行 代码 ， 就 说 明 输 入 是 数字 ， 所 以 返回 true. 
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7. function isZip(inZip) { 
if (inZip == "") { 
return true; 


return (isNum(inZip)); 

在 这 个 表单 中 ，Zip 编码 字段 为 空 是 有 效 的 。 因 此 我 们 先 检查 用 户 是 否 在 这 个 字段 中 输入 了 任何 
内 容 ， 如 果 没 有 ， 就 返回 true 一 一 这 是 有 效 的 输入 。 但 是 ， 如 果 输 入 了 任何 内 容 ， 它 就 必须 是 数字 ， 
所 以 用 isNum() 进 行 检查 。 

V 提示 

口 如 果 以 后 希望 在 HTM 表单 中 添加 另 一 个 必须 是 数字 的 新 字段 ， 那 么 不 需要 编写 新 的 

JavaScript 代码 ， 只 需 使 用 现 有 的 isNum 检查 。 

O 请 记 住 , 网络 是 全 球 性 的 ， 用 户 并 非 都 是 美国 人 。 如 果 你 的 站 点 硕 望 吸引 美国 之 外 的 用 户 , JE 
么 不 要 要 求 用 户 输入 Zip 编码 。 美 国之 外 的 地 址 可 能 有 邮政 编码 (postal code )， 也 可 能 没有 ， 
而 且 这 些 邮 政 编码 可 能 不 是 数字 。 
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用 户 在 输入 因特网 地 址 方面 可 能 会 遇 到 困难 ,尤其 是 新 用 户 。 你 可 以 扫描 他 们 输入 的 电子 邮件 地 
址 并 检查 其 形式 是 否 正确 ， 从 而 帮助 用 户 输入 正确 的 地 址 。 例 如 ， 可 以 检查 其 中 是 否 只 包含 一 个 @ 符 
号 ， 以 及 是 和 否 有 无 效 的 字符 CILE 6-12 )。 当 然 ， 脚 本 无 法 发 现 拼写 错误 ， 所 以 如 果 用 户 本 打算 输入 
joe@myprovider.com, 但 是 却 输入 了 joe@yprovidercom ， 脚 本 无 法 捕获 这 个 错误 。 脚 本 6-17 演示 如 何 


检查 地 址 中 的 错误 。 
























































































































































Email Address: badaddress@chalcedony/.com 





图 6-12 这 是 电子 邮件 验证 脚本 可 以 捕获 的 一 种 输入 错误 的 例子 
脚本 6-17 通过 扫描 表单 上 电子 邮件 字段 中 的 文本 ， 可 以 确保 获得 正确 的 电子 邮件 地 址 


window.onload = initForm; 


function initForm() { 
document .forms[0].onsubmit = validForm; 
document .getElementById("sunroof").onclick = doorSet; 


} 


function validForm() { 
var allGood = true; 
var allTags = document. forms[0].getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 


return allGood; 
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function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 


return false; 


) 


return true; 


function validBasedOnClass(thisClass) { 
var classBack - ""; 


switch(thisClass) ( 
case "": 
case "invalid": 
break; 
case "reqd": 
if (allGood 8& thisTag.value == "") ( 
classBack = "invalid "; 


classBack += thisClass; 
break; 
case "radio": 
if (allGood && !radioPicked(thisTag.name)) { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
case "isNum": 
if (allGood 8& !isNum(thisTag.value)) { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
case "isZip": 
if (allGood 8& !isZip(thisTag.value)) { 
classBack = "invalid "; 


classBack += thisClass; 
break; 
case "email": 
if (allGood 8& !validEmail(thisTag.value)) { 
classBack - "invalid "; 


classBack += thisClass; 
break; 
default: 
if (allGood && !crossCheck(thisTag,thisClass)) { 
classBack = "invalid "; 
} 
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classBack += thisClass; 


} 


return classBack; 


function crossCheck(inTag,otherFieldID) { 
if (!document.getElementById(otherFieldID)) { 
return false; 


} 
return (inTag.value !- "" || document.getElementById(otherFieldID).value !- ""); 


} 


function radioPicked(radioName) { 
var radioSet = document.forms[0][radioName] ; 


if (radioSet) { 
for (k=0; k<radioSet.length; k++) { 
if (radioSet[k].checked) { 
return true; 
} 
} 
} 
return false; 


} 


function isNum(passedVal) { 
if (passedVal == "") { 
return false; 


} 
for (var k=0; k<passedVal.length; k++) { 


if (passedVal.charAt(k) < "o") { 
return false; 


} 

if (passedVal.charAt(k) > "9") { 
return false; 

} 


} 


return true; 


} 


function isZip(inZip) { 
if (inZip == "") { 
return true; 


} 


return (isNum(inZip)); 


} 


function validEmail(email) { 


var invalidChars = " /:,;"; 


if (email == "") { 
return false; 
} 


for (var k=0; k<invalidChars.length; k++) { 
var badChar = invalidChars.charAt(k); 
if (email.indexOf(badChar) > -1) { 

return false; 

} 

} 

var atPos = email.indexOf("Q",1); 

if (atPos == -1) { 
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return false; 


j 
if (email.indexOf("@",atPos+1)!= -1) { 
return false; 


} 


var periodPos = email.indexOf(".",atPos); 
if (periodPos == -1) { 
return false; 


if (periodPos+3 > email.length) { 
return false; 
} 


return true; 
} 
} 
} 


function invalidLabel(parentTag) { 
if (parentTag.nodeName == "LABEL") { 
parentTag.className += " invalid"; 


) 


function doorSet() { 
if (this.checked) ( 
document.getElementById("twoDoor").checked = true; 
} 


} 


> 验证 电子 邮件 地 址 


1. if (allGood && !validEmail(thisTag.value) ){ 
classBack = "invalid "; 
这 行 代码 添加 在 switch/case AES RAY) email Berp , MER validEmail() eG El false, Wi class 
WEA invalid. 
2. var invalidChars = " /:,;"; 
在 validEmail 函数 中 , 创建 变量 invalidChars， 其 中 包含 电子 邮件 地 址 中 最 可 能 出 现 的 5 个 无 效 
字符 : AMA. BHL. AS. SAIS. 



































3. if (email == "") { 
return false; 
这 个 测试 的 意思 是 ,“ 如 果 email 字段 的 内 容 是 空 的 ， 那 么 结果 是 false.” 
4. for (var k=0; k«invalidChars.length; k++) { 
在 这 个 for 语句 中 , 对 invalidChars 字符 串 中 的 每 个 字符 进行 扫描 。 首先 将 计数 融 k 初始 化 为 零 ， 
然后 设置 循环 终止 条 件 CK 小 于 字符 串 的 长 度 )， 最 后 用 递增 操作 符 ++ 使 k 递增 。 
5. var badChar = invalidChars.charAt(k); 
if (email.indexOf(badChar) > -1) { 


return false; 


将 badChar 变量 设置 为 invalidChars 字符 串 中 k 位 置 上 的 无 效 字 符 ， 然 后 检查 电子 邮件 地 址 
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(email) 中 是 否 有 这 个 字符 。 如 果 有 ，index0f() 就 会 返回 找到 这 个 字符 的 位 置 ， 如 果 没 有 ， 它 会 返回 
-1。 如 果 获 得 -1 之 外 的 值 ， 就 说 明 找 到 了 一 个 无 效 字符 ， 因 此 返回 false. 
6. var atPos = email.indexOf("Q",1); 
if (atPos == -1) { 
return false; 
将 atPos 变量 设置 为 @ 符 号 的 位 置 。 脚本 使 用 indexof 从 地 址 的 第 二 个 字符 开始 检查 第 一 个 @ 符 号 。 
如 果 这 个 @ 符 号 的 位 置 是 -1， 就 意味 着 地 址 中 没有 @ 符 号 ， 因 此 是 错误 的 。 
7. if (email.indexOf("Q",atPos«1) != -1) ( 
return false; 
现在 ， 脚 本 检查 第 一 个 @ 符 号 之 后 的 字符 ， 从 而 确保 只 有 一 个 @ 符 号 ， 并 且 拒 绝 任何 包含 多 个 @ 符 
号 的 输入 。 
8. var periodPos = email.indexOf(".",atPos); 
if (periodPos == -1) { 
return false; 
现在 ,脚本 检查 在 @ 符 号 后 面 是 否 有 点 号 。 如 果 没 有 ， 就 返回 false. 
9. if (periodPos+3 > email.length) { 


















































return false; 
} 
return true; 
最 后 ， 脚 本 要 求 在 地 址 中 的 点 号 后 面 至 少 有 两 个 字符 。 如 果 通 过 了 所 有 这 些 检查 ， 而 没有 发 现 错 
jx, 那么 validEmail 函数 的 值 就 是 true， 这 意味 着 电子 邮件 地 址 是 有 效 的 。 
V 提示 
O 电子 邮件 地 址 验证 和 确认 之 间 有 一 点 区 别 。 这 个 脚本 只 是 验证 电子 邮件 地 址 ,确保 用 户 输入 的 
内 容 符合 电子 邮件 地 址 的 正确 形式 。 但 是 ， 它 无 法 确认 这 个 地 址 是 否 真实 存在 。 进 行 确认 的 唯 
一 方法 是 向 这 个 地 址 发 送 一 封 电子 邮件 ， 并 检查 是 否 有 回复 。 但 是 ， 这 种 做 法 不 太 好 ， 因 为 如 
果 发 送 确认 邮件 ,可 能 会 引起 用 户 的 反感 ， 而 且 邮 件 可 能 要 过 好 几 个 小 时 才能 得 到 回复 ， 而 在 
此 期 间 用 户 不 会 有 耐心 一 直 在 表单 上 等 待 。 
O 这 个 脚本 并 未 捕捉 所 有 电子 邮件 地 址 错误 ,而 是 仅 捕捉 最 常见 的 错误 。 对 所 有 电子 邮件 地 址 
错误 进行 全 面 检 查 需 要 好 几 页 代码 。 如 果 你 仔细 研究 一 番 ， 可 能 能 够 捕捉 这 个 脚本 未 考虑 到 的 
错误 。 

























































































表单 和 正则 表达 式 








则 表达 式 是 一 种 对 文本 字符 串 进 行 验证 和 格式 化 的 极其 强大 的 方式 。 通 过 使 用 正则 表达 式 ， 
可 以 用 一 两 行 JavaScript 代码 完成 原本 需要 几 十 行 代码 的 复杂 任务 。 
EM RIAA (regular expression， 常 常 缩写 为 RegExp ) 是 一 种 用 特殊 符号 编写 的 模式 ， 描 述 一 个 
或 多 个 文本 字符 串 。 使 用 正则 表达 式 匹配 文本 的 模式 ， 这 样 脚本 就 可 以 轻松 地 识别 和 操纵 文本 。 与 算 
术 表 达 式 一 样 , 创建 正则 表达 式 也 要 使 用 操作 符 , 但 是 在 这 种 情况 下 使 用 的 是 操作 文本 ( 而 不 是 数字 ) 
的 操作 符 。 有 许多 正则 表达 式 操 作 符 ， 我 们 在 本 章 中 将 讨论 最 常用 的 一 些 操作 符 。 通 过 学 习 和 使 用 这 
些 操作 符 ， 在 需要 搜索 和 操纵 文本 字符 串 时 ， 就 能 够 节省 大 量 时 间 和 精力 。 
正则 表达 式 也 常常 被 认为 是 编程 中 最 环 手 的 部 分 之 一 。 你 可 能 觉得 已 经 很 好 地 掌握 了 JavaScript, 
但 是 突然 遇 到 了 一 个 包含 正则 表达 式 的 脚本 ， 这 可 能 使 你 完全 无 法 理解 脚本 的 作用 。 如 果 你 不 了 解 正 
则 表达 式 的 语法 ， 那 么 根本 猜 不 出 会 发 生 什 么 情况 。“ 这 一 大 堆 乱 七 八 糟 的 字符 是 什么 意思 ? ” 
但 是 ， 只 要 把 混乱 的 正则 表达 式 分 解 成 有 意义 的 小 块 ， 其 语法 并 不 难 理解 。 在 本 章 中 ,我 们 将 讲 
解 正则 表达 式 语法 ， 并 讨论 如 何 使 用 正则 表达 式 使 代码 更 简洁 、 更 强大 。 





















































































































































你 想 暂 时 回避 正则 表达 式 吗 

如 果 这 是 你 第 一 次 面 对 正 则 表达 式 ， 你 现在 很 可 能 党 得 压力 很 大 。 我 们 把 这 一 章 放 在 这 里 ， 是 
因为 使 用 正则 表达 式 验证 表单 输入 是 非常 有 意义 的 。 但 是 本 书 中 的 其 余 内 容 并 不 依赖 于 本 章 ， 所 以 
如 果 你 想 跳 到 下 一 章 ， 直 到 具备 更 丰富 的 脚本 编程 经 验 之 后 再 来 学 习 本 章 ， 也 是 可 以 的 。 

另 一 方面 ， 正 则 表达 式 是 值得 花 时 间 学 习 的 。 正 则 表达 式 不 仅 在 JavaScript 中 有 用 ， 在 其 他 许 
多 地 方 也 可 以 使 用 正则 表达 式 ， 例 如 其 他 编程 语言 ( 比如 Perl, Java, Python 和 PHP ), Apache fè 
置 文件 以 及 BBEdit 和 TextMate 等 文本 编辑 器 。 甚 至 Adobe Dreamweaver 和 Microsoft Word (在 一 
定 程度 上 ) 使 用 正则 表达 式 也 可 以 实现 更 强大 的 搜索 和 替换 。 


7.1 用 正则 表达 式 验 证 电子 邮件 地 址 


在 第 6 章 中 , 有 一 个 对 电子 邮件 地 址 进行 验证 的 示例 。 完 成 这 个 任务 所 需 的 脚本 相当 长 。 脚本 7-3 
的 作用 在 本 质 上 与 脚本 6-17 相同 , 但 是 通过 使 用 正则 表达 式 ， 脚 本 的 代码 少 多 了 , 而且 可 以 得 到 更 严 
格 的 结果 。HTML 见 脚本 7-1, CSS 见 脚本 7-2。 
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脚本 7-1 电子 邮件 验证 示例 的 HTML 


<!DOCTYPE html» 
<html> 
<head> 
<title>Email Validation</title> 
<link rel="stylesheet" href="script01.css"> 
<script src="script01.js"></script> 
</head> 
<body> 
«h2 class="centered">Email Validation</h2> 
<form action="someAction.cgi"> 
<p><label for="emailAddr">Email Address:<input id="emailAddr" type="text" size="30" class="email"> 
»</label></p> 
<p><input type="submit" value="Submit">&nbsp;<input type="reset"></p> 
</form> 
</body> 
</html> 


脚本 7-2 IX BE CSS 是 本 章 刚 开始 的 几 个 任务 所 需要 的 


body { 
color: #000; 
background-color: #FFF; 








} 


input.invalid { 
background-color: #FF9; 
border: 2px red inset; 


} 


label.invalid { 
color: #F00; 
font-weight: bold; 
} 


.centered { 
text-align: center; 
} 


脚本 7-3 Aik JLAT JavaScript 代码 就 完成 了 验证 电子 邮件 地 址 的 复杂 任务 


window.onload = function() { 
document. forms[0].onsubmit = validForm; 
} 


function validForm() { 
var allGood = true; 
var allTags = document. forms[0].getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 


return allGood; 
function validTag(thisTag) { 


var outClass = ""; 
var allClasses = thisTag.className.split(" "); 
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for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 


return false; 


) 


return true; 


function validBasedOnClass(thisClass) { 
var classBack - ""; 


switch(thisClass) ( 
case "": 
case "invalid": 
break; 
case "email": 
if (allGood 8& !validEmail(thisTag.value)) ( 
classBack = "invalid"; 


} 
default: 
classBack += thisClass; 


} 


return classBack; 


} 


function validEmail(email) { 
var re = /*\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\. \w{2, 3})+$/; 


return re.test(email) ; 


} 


function invalidLabel(parentTag) { 
if (parentTag.nodeName -- "LABEL") ( 
parentTag.className += "invalid"; 


) 


E» 使 用 正则 表达 式 验证 电子 邮件 地 址 








l. var re = /*\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\. \w{2,3})+$/; 
天 哪 ! 这 到 底 是 什么 ” 别 担心 ， 这 只 是 validEmail() 函 数 中 的 一 个 正则 表达 式 。 我 们 将 它 分 解 姑 
并 逐 段 讲解 。 与 任何 JavaScript 代码 一 样 ， 正 则 表达 式 也 要 从 左 向 右 读 。 








n 











首先 ，re 仅仅 是 一 个 变量 。 我 们 将 它 命名 为 ze， 这 样 在 以 后 使 用 它 时 就 容易 想起 它 是 一 个 正 由 
表达 式 。 这 行 代码 将 re 的 值 设置 为 等 号 右边 的 正则 表达 式 。 
正则 表达 式 总 是 以 斜 杠 ( / ) 开头 和 结尾 〈 当然 ,仍然 有 一 个 分 号 ， 表 示 JavaScript 代码 行 结 
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但 分 号 不 是 正则 表达 式 的 一 部 分 )。 斜 杠 之 间 的 所 有 内 容 都 是 正则 表达 式 的 组 成 部 分 。 

MFI O) 表示 我 们 要 使 用 这 个 表达 式 检查 以 特定 的 字符 串 开 头 的 字符 串 。 如 果 去 掉 脱 字符 ， 
那么 即使 字符 串 开头 有 一 堆 “ 垃 圾 字符 ”， 电 子 邮件 地 址 也 可 能 被 认为 是 有 效 的 。 

表达 式 \w 表示 任意 单一 字符 ,包括 a~z、A ~Z、0~9 和 下 划 线 。 电 子 邮件 地 址 必须 以 这 些 字符 
ZT 

加 号 + 表示 我 们 要 寻找 前 面条 目的 一 次 或 多 次 出 现 。 在 这 个 示例 中 , 电子 邮件 地 址 必须 以 字符 a~z、 
A~Z、0~9 或 下 划 线 的 任意 组 合 开头 。 

左 圆 括号 (表示 一 个 组 。 这 意味 着 后 面 将 要 引用 圆 括号 中 的 所 有 内 容 ， 所 以 现在 将 它们 放 在 一 个 
组 中 。 

方 括号 [] 用 来 表示 可 以 出 现在 其 中 的 任意 一 个 字符 。 在 这 个 示例 中 ， 方 括号 内 包含 字符 \.-。 我 
们 和 希望 允许 用 户 输入 点 号 或 连 字 符 ,， 但 是 点 号 对 于 正则 表达 式 有 特殊 意义 ， 所 以 需要 在 它 前 面 加 上 反 
斜 杠 \， 这 表示 我 们 指 的 实际 上 是 点 号 本 身 ， 而 不 是 它 的 特殊 意义 。 在 特殊 字符 前 面 使 用 反 斜 杠 称 为 
“对 字符 转 义 ”"。 因 为 有 方 括号 ,输入 的 字符 串 在 这 个 位 置 可 以 有 一 个 点 号 或 一 个 连 字 符 , 但 是 两 者 不 
能 同时 存在 。 注 意 ， 连 字符 不 代表 任何 特殊 字符 ， 所 以 不 用 加 反 斜 杠 。 

问号 ?表示 前 面 的 条 目 可 以 不 出 现 或 者 出 现 一 次 。 所 以 ,在 电子 邮件 地 址 的 第 一 部 分 ( 在 @ 前 面 的 
部 分 ) 中 可 以 有 一 个 点 号 或 一 个 连 字符 ， 也 可 以 没有 。 

在 ?后 面 ， 再 次 使 用 w+ ， 这 表示 点 号 或 连 字符 后 面 必 须 有 其 他 一 些 字符 。 

右 圆 括号 ) 表 示 这 个 组 结束 了 。 在 此 之 后 是 一 个 星 号 ， 表 示 前 面 的 条 目 ( 在 这 个 示例 中 ， 指 圆 括 
号 中 的 所 有 内 容 ) 可 以 不 出 现 或 者 出 现 多 次 。 所 以 如 果 dori 是 有 效 的 电子 邮件 前 级 ,testing-testing-1-2-3 
也 是 。 

@ 字 符 仅仅 代表 它 本 身 ， 没 有 任何 其 他 意义 ， 这 个 字符 位 于 电子 邮件 地 址 前 级 和 域名 之 间 。 

再 次 使 用 \w+， 这 表示 域名 必须 以 一 个 或 多 个 a~z、A ~Z、0~9 或 下 划 线 字符 开头 。 在 此 之 后 同 
样 是 ([ 人 \.-]?\w+)*， 表 示 电 子 邮件 地 址 的 后 组 中 允许 有 点 号 或 连 字 符 。 

然后 , 在 一 对 圆 括号 中 建立 另 一 个 组 : \.\w{2,3}， 表 示 我 们 希望 找到 一 个 点 号 ,后面 跟着 一 些 字 
符 。 在 这 个 示例 中 ， 花 括号 中 的 数字 表示 前 面 的 条 目 ( 本 例 中 是 \w， 表 示 字 母 、 数 字 或 下 划 线 ) 可 以 
出 现 2 次 或 3 次 。 在 这 个 组 的 右 圆 括号 后 面 是 一 个 +， 也 表示 前 面 的 条 目 ( 这 个 组 ) 必须 出 现 一 次 或 
多 次 。 这 会 匹配 .com 或 .edu 之 类 的 ， 也 与 ox.ac.uk 匹配 。 

最 后 ， 正 则 表达 式 的 末尾 是 一 个 美元 符号 $s， 表示 匹配 的 字符 串 必须 在 这 里 结束 。 这 使 脚本 能 
拒绝 那些 开头 正确 , 但 是 在 末尾 包含 垃圾 字符 的 电子 邮件 地 址 。 斜 杠 结束 正则 表达 式 。 分 号 和 原来 一 
样 结束 JavaScript 语句 。 

2. return re.test(email); 

这 一 行 获得 前 一 步 中 定义 的 正则 表达 式 , 并 使 用 test() 方 法 验证 电子 邮件 地 址 的 有 效 性 。 如 果 输 
入 的 字符 串 不 符合 re 中 存储 的 模式 ，test() 就 返回 false， 错 误 的 字段 及 其 标签 变 成 红色 的 粗 体 ， 如 
图 7-1 所 示 。 如 果 输 入 有 效 ， 就 返回 true C 见 图 7-2 )， 表 单 将 电子 邮件 地 址 提交 给 一 个 服务 器 端 脚本 
(someAction.cgi ) 进行 进一步 处 理 。 
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Email Validation Lt! Email Validation il 
+ a dropbosusercontent.co = | B IE E * ^ à dropboxusercontent.co - B ’+t Hun 
Email Validation Email Validation 
Email Address Email Address: poxelthecat@pocel mu 
Submit || Reset Submit | | Reset 
图 7-1 这 是 用 户 输入 无 效 电子 邮件 地 址 的 结 图 7-2. 这 个 地 址 是 有 效 的 





标签 和 字段 变 成 红色 、 粗 体 
V 提示 





一 样 ， 正 则 表达 式 的 结果 可 以 是 一 个 对 象 。 
口 请 比较 脚本 6-17 和 脚本 7-3 























口 这 段 代 码 并 没有 匹配 每 一 种 合法 的 电子 邮件 地 址 形式 ， 仅 仅 匹 配 你 最 想 让 用 户 输入 的 
O 注意 ,在 脚本 7-3 中 为 re 赋值 之 后 ， 在 步骤 2 中 将 re 作为 对 象 使 用 。 与 其 他 JavaScript 变量 


1 的 validEmail() PAX. HUTA 27 行 ， 而 后 者 只 有 4 行 。 














作用 是 相同 的 ， 由 此 可 以 看 出 正则 表达 式 表 
































EX. 





它们 的 
实 可 以 减少 大 量 代码 。 














O 在 表 7-1 中 会 看 到 正则 表达 式 中 的 特殊 字符 ( 有 时 候 称 为 元 字符 ， 
写 的 。 在 对 使 用 正则 表达 式 的 脚本 进行 调试 时 要 记 住 这 一 点 。 
O 在 正则 表达 式 中 ， 有 一 些 字符 可 以 改变 其 他 操作 符 的 行为 ， 见 表 7-2。 





meta character ) 是 区 分 大 小 



































表 7-1 正则 表达 式 中 的 特殊 字符 
字 F 匹配 
\ 在 字面 意义 和 特殊 意义 之 间 进 行 切换 。 例 如 \w 表 示 \w 的 特殊 意义 ( 见 下面 的 解释 ) 而 不 是 字面 
值 w， 但 是 \$ 表 示 不 使 用 $ 的 特殊 意义 ( 见 下 面 的 解释 ) 而 是 使 用 $ 字 符 本 身 
: 字符 串 的 开头 
$ 字符 串 的 结尾 
零 次 或 多 次 
+ 一 次 或 多 次 
? 零 次 或 一 次 
. 除 换行 符 外 的 任何 字符 
\b 单词 边界 
\B 非 单词 边界 
\d 0 一 9 的 任何 数字 (与 [0-9] 相 同 ) 
\D 任何 非 数字 
\f 换 页 符 (form feed) 
\n 换行 符 
\r 回 车 符 
\s 任何 一 个 空白 字符 (与 [\f\n\r\t\v] 相 同 ) 
\s 任何 一 个 非 空白 字符 
\t 制 表 符 
Ww 垂直 制 表 符 
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CH) 
cz 符 匹 ç 
\w 任何 字母 、 数 字 以 及 下 划 线 (与 [a-zA-Z0-9_] 相 同 ) 
NM 除数 字 、 字 母 及 下 划 线 外 的 其 他 字符 
\xnn 十 六 进 制 数字 mn 定义 的 ASCI 字 符 
\onn 八进制 数字 nn 定义 的 ASCII 字 符 
\cX 控制 字符 X 
[abcde] 与 其 中 任何 字符 匹配 的 字符 集 
[^abcde] 字符 补 集 ， 与 其 中 任何 字符 都 不 匹配 的 字符 集 
[a-e] 与 其 中 的 字符 范围 匹配 的 字符 集 
[\b] 退 格 字符 的 字面 意义 (不 同 于 \b) 
{n} 前 面 的 字符 正好 出 现 n 次 
{n,} 前 面 的 字符 至 少 出 现 n 次 
{n,m} 前 面 的 字符 出 现 n ~ mi 
0 一 个 组 ， 可 以 在 后 面 引用 它 
xly x 或 y 


表 7-2 ”正则 表达 式 修饰 符 











修饰 符 4 y 
8 搜索 所 有 的 匹配 (全局) ,不 只 是 第 一 处 匹配 
i 进行 不 区 分 大 小 写 的 搜索 


7.2 ”验证 文件 名 


可 以 用 正则 表达 式 做 许多 事情 ,但 是 最 有 用 的 功能 之 一 是 验证 网 页 上 表单 中 的 输入 字段 。 脚本 7-4 
希望 用 户 输入 一 个 图 像 的 有 效 URL, 正则 表达 式 有 助 于 确保 用 户 的 输入 符合 要 求 ( 具体 地 说 , 文件 名 
必须 有 表示 图 像 文件 的 后 级 ) 图 7-3 显示 当 意 外 输入 无 效 的 URL 时 页 面 的 效果 ， 图 7-4 显示 输入 正 
确 的 图 像 名 称 时 的 效果 。 




























































































[reete] EIE) [recie] EXE) 
View Image ES View Image lal 

^ - dropboxusercon B- P2? ++ f D- * d dropborusercon * B- 5» & tf D- 

Image Viewer Image Viewer 
Image URL: [ee O Image URL: htip /wnw dori. com/mages/miata2 jpg 
Submit Reset {Submit | | Reset 

p — 1h, 
é ars > 
图 7-3 ”由 于 使 用 了 正则 表达 式 ， 如 果 用 户 输入 的 不 是 图 7-4 ”如果 输入 了 正确 的 图 像 文 件 名 ， 


























有 效 的 图 像 文 件 名 ， 页 面 就 会 指出 这 个 错误 就 在 页 面 上 显示 这 个 图 像 
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脚本 7-4 这 个 脚本 要 求 用 户 输入 图 像 位 置 ， 如 果 URL 通过 了 验证 ， 就 在 页 


window.onload = function() { 
document.forms[0].onsubmit = validForm; 
} 


function validForm() { 
var allGood = true; 
var allTags = document.forms[0].getElementsByTagName("*"); 


for (var i=0; i«allTags.length; i++) { 
if (!validTag(allTags[i])) { 
allGood = false; 
} 
} 


return false; 


function validTag(thisTag) { 
var outClass = ""; 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 
} 


return false; 


} 


return true; 


function validBasedOnClass(thisClass) { 
var classBack = ""; 


switch(thisClass) { 


case 
case "invalid": 
break; 


case "imgURL": 
if (allGood 8& !setImgURL(thisTag.value)) { 
classBack = "invalid "; 


} 
default: 
classBack += thisClass; 
} 
return classBack; 


} 


function setImgURL(newURL) { 
var re = /*(file|http):\/\/\S+\/\S+\. (gif | jpg| png) $/i; 


if (re.test(newURL)) { 
document.getElementById("chgImg").src = newURL; 
return true; 











上 显示 这 个 图 像 
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return false; 


function invalidLabel(parentTag) { 
if (parentTag.nodeName == "LABEL") { 
parentTag.className += "invalid"; 


} 
} 
} 


> 验证 URL 

QO var re = /*(file|http):\/\/\S+\/\S+\. (gif|jpg/png)$/i; 

这 行 代码 在 imgURL() 函 数 中 。 与 前 一 个 示例 一 样 ， 我 们 希望 检查 输入 的 整个 字段 ， 所 以 正则 表达 
式 以 开头， 以 $/ 结 束 。 输 入 可 以 以 文本 http zk file 开头 ， 所 以 将 这 两 个 字符 串 放 在 一 个 组 中 ,用 | 
分 隔 ， 表 示 可 以 接受 两 者 之 一 。 无 论 用 户 是 从 本 地 硬盘 还 是 从 Web 获得 图 像 ，:// 几 个 字符 都 是 必需 
的 ， 所 以 接 下 来 检查 这 些 字符 。 注 意 ， 每 个 正 斜 杠 必须 分 别 进行 转 义 ( 这 里 的 两 处 \/ 都 是 转 义 后 的 正 
斜 杠 )， 因 为 正 斜 杠 是 正则 表达 式 特殊 字符 。 

在 此 之 后 ， 几 乎 可 以 出 现任 何 字符 ， 所 以 使 用 \S+ 表 示 后 面 是 一 个 或 多 个 非 空格 字符 。 然 后 需要 
另 一 个 正 斜 杠 〈 同样 经 过 转 义 ) 来 分 隔 域名 和 文件 名 ， 然 后 是 另 一 个 \S+ 用 来 处 理 文件 名 。 

文件 名 需要 以 点 号 和 gif, jpg 和 png 结束。 点 号 经 过 转 义 ,两 个 后 级 组 合 在 一 起 , 表示 接受 其 中 之 一 。 

在 这 个 正则 表达 式 后 面 ， 使 用 修饰 符 i 允许 用 户 输 入 大 写 或 小 写字 母 。 这 个 修饰 符 让 正则 表达 式 
不 区 分 大 小 写 。 


7.3 提取 字符 串 


字符 串 验证 并 不 是 使 用 正则 表达 式 能 够 完成 的 唯一 任务 。 字 符 串 提取 (extraction ) 也 是 有 意义 的 。 
可 以 提取 并 操作 字符 串 的 一 部 分 ， 这 样 就 可 以 对 最 终结 果 进 行 更 细 的 控制 。 在 脚本 7-5 中 ,我们 获得 
一 系列 输入 的 姓名 ， 其 中 名 字 在 前 ， 姓 氏 在 后 ， 然 后 交换 名 和 姓 的 次 序 。 


脚本 7-5 这 个 脚本 重新 安排 输入 的 姓名 列表 
window.onload = function() { 


document. forms[0].onsubmit = validForm; 
} 


function validForm() { 
var allTags = document.forms[0].getElementsByTagName("*") ; 




























































































for (var i=0; i«allTags.length; i++) { 
validTag(allTags[i]); 
} 


return false; 


function validTag(thisTag) { 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 
if (allClasses[j] == "nameList") { 
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thisTag.value = setNameList(thisTag.value) ; 


} 
} 


function setNameList(inNameList) { 
var newNames = new Array; 
var newNameField = ""; 


var re = /\s*\n\s*/; 
var nameList = inNameList.split(re); 


re = /(\S+)\s(\S+)/; 


for (var k=0; k<nameList.length; k++) { 
newNames[k] = nameList[k].replace(re, "$2, $1"); 


for (k=0; k<newNames.length; k++) { 
newNameField += newNames[k] + "\n"; 
} 
return newNameField; 
} 
} 
} 


> 提取 字符 串 








].var re = /\s*\n\s*/; 

这 是 一 个 新 的 正则 表达 式 ， 它 搜索 的 文本 模式 是 按照 任何 空白 字符 〈\s* )、 换 行 符 〈\n ) 和 任何 
空白 字符 (\s* ) 的 顺序 组 成 的 。 

2. var nameList = inNameList.split(re) ; 

字符 串 方法 split() 获 得 正则 表达 式 , 并且 将 它 应 用 于 用 户 输入 的 存储 在 inNameList 中 的 数据 (IL 
图 7-5 )。 每 个 换行 符 分 隔 一 个 姓名 ，split() 将 每 行 上 的 输入 数据 分 隔 开 。 结 果 是 一 个 输入 的 姓名 的 字 
符 串 数组 ， 其 中 每 个 数组 元 素 都 是 一 个 姓名 ， 存 储 在 数组 nameList 中 。 

3. re = /(NS4)NS(NS4)/; 

接 下 来 ， 需 要 另 一 个 正则 表达 式 ， 它 可 以 将 每 个 姓名 分 隔 成 名 字 和 姓氏 。 它 搜索 的 是 任何 非 空白 
字符 (\S+ ), 然后 是 一 个 空白 字符 (\s )， 最 后 是 任何 非 空白 字符 〈\S+ )。 每 组 非 空白 字符 需要 加 上 圆 
括号 ， 以 便 在 后 面 引用 这 些 字 符 。 

4. for (var k=0; k<nameList.length; k++) { 

对 于 nameList 数组 中 的 每 个 姓名 ， 循 环 执行 以 下 代码 。 

5. newNames[k] = nameList[k].replace (re, "$2, $1"); 

记得 步骤 3 中 的 圆 括号 吗 ? 当 执 行 replace() 方 法 时 , 正则 表达 式 re 将 nameList 的 数组 元 素 分 隔 
成 名 字 和 姓氏 。 这 些 圆 括号 让 JavaScript 将 名 字 存 储 在 正则 表达 式 属 性 $1 中 ， 将 姓氏 存储 在 正则 表达 
式 属性 $2 中 。 然 后 ，replace() 方 法 使 用 传递 给 它 的 第 二 个 参数 ， 返 回 新 的 字符 串 : 首先 是 姓氏 $2， 
然后 是 一 个 逗号 ， 最 后 是 名 字 $1。 现 在 ， 将 姓氏 在 前 的 姓名 存储 在 新 数组 newNames 中 。 

6. for (k=0; k«newNames.length; k++) { 

newNameField += newNames[k] + "n"; 


} 
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这 个 循环 设置 一 个 新 变量 newNameField, 它 将 包含 转换 后 的 用 户 输 入 文本 。 对 于 newNames 数组 中 
的 每 个 姓名 ， 将 姓名 追加 进 newNameField， 再 加 上 一 个 换行 符 。 


7. return newNameField; 


我 们 返回 结果 来 更 新 网 页 。 更 新 在 switch/case 部 分 :thisTag.value = nameList(thisTag. value); o 
结果 见 图 7-6。 





cj S| 
Name List Reversal | dul 
€ @ ht 


dropbc 


cB-c2| & f 四 - 





—— 


* | t.i Name List Reversal 
Reverse a list of names 

< @ https: 
Enter a list of names with first name first, one per line 
Ralph Spoilsport 
BettyJo Bialovsky 
Audrey Farber 
Melanie Faber 


dl.dropbc C |B- cop 4 


orgy Tirebiter 


Reverse a list of names 
Mick Danger 


Enter a list of names with first name first, one per line 
Spoilsport, Ralph 

Bialovsky, BettyJo 

Farber, Audrey 

Faber, Melanie 

Tirebiter, Porgy 

Danger, Nick 





Submit | Reset 




















图 7-5 这 是 转换 前 的 列表 图 7-6 改变 姓名 次 序 后 的 页 面 
v 提示 





O 这 个 脚本 只 处 理由 空格 分 隔 的 名 字 和 姓氏 。 如 果 和 希望 处 理 中 间 名 或 者 由 多 部 分 组 成 的 姓氏 , 就 
必须 修改 脚本 。 
口 





在 这 个 脚本 中 , 在 不 同 的 位 置 多 次 使 用 了 变量 re, 








并 给 它 赋 以 不 同 的 值 。 这 在 JavaScript 中 是 允 
许 的 (我 们 在 这 里 这 么 做 就 是 为 了 演示 这 一 点 )， 但 是 也 可 以 考虑 在 自己 的 脚本 中 使 用 不 同 的 变 
量 名 。 在 以 后 调试 或 修改 脚本 时 ， 这 会 使 工作 更 轻松 。 





7.4 格式 化 字符 串 


用 户 常常 以 很 随意 的 格式 输入 数据 。 如 果 你 希望 输入 符合 一 种 标准 格式 ,那么 最 好 自己 处 理 格式 
化 。 脚 本 7-6 演示 了 如 何 获得 一 系列 姓名 并 且 将 它们 转换 为 标准 的 首 字母 大 写 格式 。 
脚本 7-6 ”这 个 脚本 获得 以 任何 格式 输入 的 姓名 ， 并 且 将 它们 转换 为 首 字母 大 写 格式 

window.onload = function() { 


document. forms[0].onsubmit = validForm; 
} 


function validForm() { 
var allTags = document. forms[0].getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
validTag(allTags[i]); 


return false; 
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function validTag(thisTag) { 
var allClasses = thisTag.className.split(" "); 


for (var j=0; j<allClasses.length; j++) { 


} 


if (allClasses[j] == "nameList") { 
thisTag.value = setNameList(thisTag.value) ; 


function setNameList(inNameList) { 


} 
} 
} 


var newNames = new Array; 
var newNameField = ""; 


var re = /\s*\n\s*/; 
var nameList = inNameList.split(re); 


re = /*(\S)(\S+)\s(\S) (\S+)$/; 


for (var k=0; k<nameList.length; k++) { 
if (namelist[k]) ( 
re.exec(nameList[k]); 
newNames[k] = RegExp.$1.toUpperCase() + RegExp.$2.toLowerCase() + 
*toUpperCase() + RegExp.$4.toLowerCase(); 


+ RegExp.$3. 


for (k=0; k<newNames.length; k++) { 
newNameField += newNames[k] + "\n"; 


return newNameField; 


> 对 字符 串 进 行 格式 化 








1. re = /^(\S)(\S+)\s(\S)(\S+)$/; 
这 个 正则 表达 式 同样 寻找 符合 “名 字 、 空 格 、 姓 氏 ” 次 序 的 姓名 ,并 且 将 每 个 姓名 分 隔 成 4 部 分 : 
名 字 的 首 字母 ^(\S)、 名 字 的 剩余 字母 (\S+)、 姓 氏 的 首 字母 (\5) 以 及 姓氏 的 剩余 字母 (\S+)$。 注 意 ,“^ 





和 $ 迫 使 字符 











在 这 两 个 位 置 开始 和 结束 ， 因 为 我 们 不 希望 漏 掉 任何 东西 。 





2. for (var k=0; k<nameList.length; k++) { 

我 们 希望 检查 namelist 数组 中 的 每 个 姓名 ， 见 图 7-7. 

3. re.exec(nameList[k]); 

这 个 步骤 使 用 exec() 方 法 在 字符 串 nameList[k] 上 执行 正则 表达 式 ze， 从 而 将 字符 串 分 隔 为 4 个 
部 分 , 并 且 自 动 地 设置 JavaScript 内 置 的 RegExp 对 象 。 这 4 个 部 分 分 别 存储 在 RegExp.$1、RegExp.$2、 





RegExp.$3 和 RegExp.$4 中 。 
4. newNames[k] = RegExp.$1.toUpperCase()+ RegExp.$2.toLowerCase() + 












































+ RegExp.$3. 


"toUpperCase()* RegExp.$4.toLowerCase(); 
转换 后 的 姓名 存储 在 newNames 数组 中 。 它 包含 转换 为 大 写 的 名 字 首 字母 ( RegExp.$1 )， 转 换 为 小 
写 的 名 字 剩 余 字 母 ( RegExp.$2 )， 然 后 是 一 个 空格 ， 然 后 是 转换 为 大 写 的 姓氏 首 字母 (RegExp.$3 ), 
最 后 是 转换 为 小 写 的 姓氏 剩余 字母 ( RegExp.$4 )。 然 后 显示 姓名 ， 见 图 7-8。 
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et je List Capitabzavon d eoo Name List Cagitak 2a6. 
€ c ttps:/ /di.dropboxusercontent.com/u/2127486/jsvas9/ch07/... 回 = € c ttps:/ /di.dropboxusercontent.com/u/212748 q 7.u = 
Capitalize a list of names Capitalize a list of names 

Enter a list of names with first name first, one per line: Enter a list of names with first name first, one per line: 

ralph spoilsport Ralph Spoilsport 

be ovsky Bettyjo Bialovsky 

au Audrey Faber 

po 

n 

Submit Reset Submit Reset 

= Y, Me - B hM = vy v 6 
图 7-7 这 是 转换 之 前 的 姓名 图 7-8 这 是 转换 后 的 效果 ， 已 经 符合 我 们 的 要 求 了 
关于 RegExp 对 象 


JavaScript 有 一 个 内 置 的 RegExp 对 象 ， 每 当 脚 本 执行 正则 表达 式 方法 ( 见 表 7-4 和 表 7-5) 时 ， 
会 自动 地 设置 ( 和 重新 设置 ) 这 个 对 象 。 这 个 对 象 的 属性 见 表 7-3， 它 的 方法 见 表 7-4。RegExp THK 
并 不 是 一 个 包含 正则 表达 式 操作 结果 的 变量 ， 而 是 包含 正则 表达 式 所 描述 的 模式 ， 脚 本 可 以 通过 
RegExp 对 象 的 属性 和 方法 访问 文本 模式 的 各 个 部 分 。 


表 7-3 ”RegExp 对 象 的 属性 












































属 性 意 义 
$1 (到 $9) 圆 括号 包围 的 子 字 符 串 匹配 
$_ 相当 于 input 
$* 相当 于 multiline 
$& 相当 于 lastMatch 
和 4 相当 于 lastParen 
$ 相当 于 leftContext 
$' 相当 于 rightContext 
constructor 指定 创建 对 象 原型 的 函数 
global 全 局 搜索 (使 用 g 修 饰 符 ) 
ignoreCase 不 区 分 大 小 写 搜索 (使 用 i 修饰 符 ) 
input 如 果 没 有 传递 字符 串 ， 这 就 是 要 搜索 的 字符 串 
lastIndex 继续 匹配 的 起 始 位 置 
lastMatch 最 后 一 个 匹配 的 字符 串 
lastParen 最 后 的 圆 括 号 包围 的 子 字符 串 匹配 
JeftContext 最 近 一 个 匹配 字符 串 左 边 的 子 字符 串 
multiline 是 否 跨 多 行 搜索 字符 串 
prototype 允许 在 所 有 对 象 中 添加 属性 
rightContext 最 近 一 个 匹配 字符 串 右 边 的 子 字 符 串 





source 正则 表达 式 模式 本 身 
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表 7-4 RegExp RAA 





























BR X m ox 
compile(pattern,[, "g" | "i" | "gi"]) 对 正则 表达 式 进 行 编译 
exec (string) 搜索 匹配 
test(string) 测试 匹配 
toSource() 返回 一 个 代表 对 象 的 字面 值 
toString() 返回 一 个 代表 指定 对 象 的 字符 串 
valueOf() 返回 指定 对 象 的 原始 值 

表 7-5 ”字符 串 方法 
"NE m X 

match(re) 在 一 个 字符 串 中 寻找 与 一 个 正则 表达 式 模 式 (re) 的 匹配 
replace(re, replaceStr) 使 用 正则 表达 式 (re) 执行 所 需 的 替换 
search(re) 搜索 与 正则 表达 式 (re) 的 匹配 
split (ze) 根据 正则 表达 式 (re) 对 字符 串 进行 分 隔 





7.5 ”对 字符 串 进行 格式 化 和 排序 


另 一 种 典型 任务 是 对 一 组 姓名 进行 排序 。 脚 本 7-7 将 前 两 个 示例 组 合 起 来 并 且 添 加 了 排序 功能 。 
最 终结 果 是 一 个 姓氏 在 前 的 姓名 列表 ， 采 用 首 字母 大 写 形式 ， 并 且 按 照 字 母 表 排序 。 






































脚本 7-7 这 个 脚本 接受 一 系列 任意 格式 和 次 序 的 姓名 ,并 且 将 它们 转换 成 标准 格式 的 排序 列表 


window.onload = function() { 
document.forms[0].onsubmit = validForm; 
} 


function validForm() { 
var allTags = document.forms[0].getElementsByTagName("*"); 


for (var i=0; i«allTags.length; i++) { 
validTag(allTags[i]); 


return false; 


function validTag(thisTag) { 
var allClasses - thisTag.className.split(" "); 


for (var j=0; j«allClasses.length; j++) { 
if (allClasses[j] == "nameList") { 
thisTag.value = setNameList(thisTag.value) ; 
} 


} 


function setNameList(inNameList) { 
var newNames = new Array; 
var newNameField = ""; 
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var re = /\s*\n\s*/; 
var nameList = inNameList.split(re); 


re = /*(\S)(\S+)\s(\S) (NS4)$/; 


for (var k=0; k<nameList.length; k++) { 
if (namelist[k]) { 
re.exec(nameList[k]); 
newNames[k] = RegExp.$3.toUpperCase() + RegExp.$4.toLowerCase() + ", " + RegExp.$1. 
"toUpperCase() + RegExp.$2.toLowerCase(); 
} 


newNames. sort () ; 

for (k=0; k«newNames.length; k++) { 
newNameField += newNames[k] + "\n"; 

} 


return newNameField; 
} 
} 
} 


> 对 字符 串 进 行 格式 化 和 排序 


1. newNames[k] = RegExp.$3.toUpperCase() + RegExp.$4.toLowerCase() + ", " + RegExp.$1. 
"toUpperCase() + RegExp.$2.toLowerCase(); 

在 这 个 示例 中 , 我 们 希望 按照 姓氏 进行 排序 , 所 以 创建 一 个 新 的 newNames 数组 ， 其 元 素 的 构成 是 
转换 为 大 写 的 姓氏 首 字母 ， 转 换 为 小 写 的 姓氏 剩余 字母 ， 然 后 是 一 个 逗号 和 一 个 空格 ， 再 是 转换 为 大 
写 的 名 字 首 字母 ， 最 后 是 转换 为 小 写 的 名 字 剩 余 字 母 。 

2. newNames.sort(); 

数组 方法 sort() 对 数组 中 的 元 素 进行 排序 ， 并 和 覆盖 原来 的 内 容 。 图 7-9 显示 转换 之 前 的 版 本 ， 图 
7-10 显示 转换 之 后 的 版 本 。 
































eno 





Name List Sorter eoe Name Lat Server 


€ c https:/ /di.dropboxusercontent.com/u/212748 qs9/chO ü 


€ > © B hitps://di.dropboxusercontent.com/u/2127486 /jsvqs9/ch 


Sort a list of names Sort a list of names 


Enter a list of names with first name first, one per line: 


Enter a list of names with first name first, one per line: 
Ralph Spoilsport 


Bialovsky, Bettyio 
Bettyjo Bialovsky Danger, Nick 
Faber, Audrey 
Porgy Tirebiter Spoilsport, Ralph 
Nick Danger Tirebiter, Porgy 


Submit — Reset 




















图 7-9 这 是 用 户 输入 的 姓名 列表 图 7-10 这 是 排序 和 整理 之 后 的 列表 , 符合 了 我 们 的 要 求 


7.6 ”对 字符 串 进行 格式 化 和 验证 
可 以 使 用 正则 表达 式 对 所 输入 的 值 同 时 进行 格式 化 和 验证 。 在 脚本 7-8 中 ， 用 户 输入 一 个 任意 格 
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式 的 电话 号 码 。 最 终结 果 要 么 是 一 个 经 过 格式 化 的 电话 号 码 , 要 么 是 输入 框 变 成 红色 , 标签 变 成 红色 、 
粗 体 。 


脚本 7-8 这 个 脚本 对 用 户 输入 的 电话 号 码 进行 验证 和 格式 化 


window.onload = function() { 
document. forms[0].onsubmit = validForm; 
} 


function validForm() { 
var allTags = document.forms[0].getElementsByTagName("*"); 


for (var i=0; i«allTags.length; i++) { 
validTag(allTags[i]); 


return false; 


function validTag(thisTag) { 
var outClass - ""; 
var allClasses - thisTag.className.split(" "); 


for (var j-0; j«allClasses.length; j++) { 
outClass += validBasedOnClass(allClasses[j]) + " "; 
} 


thisTag.className = outClass; 


if (outClass.indexOf("invalid") > -1) { 
invalidLabel(thisTag.parentNode); 
thisTag.focus(); 
if (thisTag.nodeName -- "INPUT") ( 
thisTag.select(); 
} 


} 
function validBasedOnClass(thisClass) { 
var classBack = ""; 


switch(thisClass) { 
case "": 
case "invalid": 
break; 
case "phone": 
if (!validPhone(thisTag.value)) { 
classBack = "invalid "; 


} 
default: 
classBack += thisClass; 


} 


return classBack; 


} 


function validPhone(phoneNum) { 
var re = /*\(?(\d{3})\)?[\.\-\/7]2(\d{3})[\.\-\7_ ]2(\d{4})$/5 


var phoneArray = re.exec(phoneNum) ; 
if (phoneArray) { 
document .getElementById("phoneField").value = "(" + phoneArray[1] +") " + phoneArray[2] 
+ "-" + phoneArray[3]; 
return true; 
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return false; 


function invalidLabel(parentTag) { 
if (parentTag.nodeName == "LABEL") { 
parentTag.className += "invalid"; 
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l. var re = /*\(2(\d{3})\)2[\.\-\7 PABP- ]?2(\d{4}) $75 
这 个 正则 表达 式 寻 找 这 样 的 字符 串 : 
口 有 一 个 可 选 的 左 圆 括号 \(? 
口 有 3 个 数字 (\d{3}) 
口 有 一 个 可 选 的 右 圆 括号 \)? 
口 有 一 个 可 选 的 点 号 、 连 字符 、 正 和 斜 杠 或 空格 [\.\-\/ ]? 
口 有 3 个 数字 (\d{3}) 
口 有 一 个 可 选 的 点 号 、 连 字 
口 有 4 个 数字 (\d{4}) 

这 个 模式 指定 了 字符 串 的 开头 和 结尾 ， 所 以 如 果 有 有 额外 的 字符 ， 字 符 串 就 不 匹配 。 如 果 找 到 三 位 
的 地 区 编码 数字 、 三 位 的 前 级 数字 和 四 位 的 后 级 数字 ， 就 分 别 保存 它们 。 

2. var phoneArray = re.exec(phoneNum); 

exec() 方 法 在 phoneNum 上 执行 re 中 存储 的 正则 表达 式 。 如 果 没 有 找到 要 搜索 的 模式 ( 见 图 7-11 ), 
phoneArray 就 被 设置 为 null, fiU], phoneArray 就 设置 为 一 个 数组 ， 其 中 包含 正则 表达 式 存储 的 值 。 

3. if (phoneArray) { 

document.getElementById("phoneField").value = "(" + phoneArray[1] + ") "+ 














3 


守 、 正 斜 杠 或 空格 [\.\-\/ D? 


a 

















phoneArray[2] + * phoneArray[3]; 
如 果 phoneArray 非 空 ， 就 会 成 功 地 通过 这 个 测试 ,这 说 明 数 组 已 经 初始 化 了 。 所 以 , 将 页 面 上 的 
表单 字段 重新 设置 为 标准 格式 : 包围 在 圆 括号 中 的 地 区 编码 ， 加 一 个 空格 ， 然 后 是 前 绥 、 连 字符 和 后 
2%, WI 7-12 所 示 。 





























[Fe | aram] | Firefox | >=) 
Phone number validator Í + | Phone number validator | + 
€ a dropbc "B-P $ A 四 ~ € â dropbc "| B-P $ A D- 
Validate a phone number Validate a phone number 
Enter your phone number (with area code): Enter your phone number (with area code). 
[phone numbed (800) 555-1212 
| Submit | ( Reset | Submit | [ Reset 
sii n | iii n 
| 








图 7-11 这 是 输入 无 效 号 码 时 的 结果 图 7-12 这 是 输入 正确 的 号 码 时 的 结果 
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7.7 ”使 用 正则 表达 式 替 换 元 素 


























你 已 经 看 到 了 正则 表达 式 在 搜索 、 匹 配 和 替换 字符 串 方 面 是 多 么 强大 。 但 是 ,还 可 以 使 用 它们 替 
换 页 面 元 素 的 名 称 ， 这 常常 可 以 节省 大 量 开发 时 间 。 在 本 节 中 , 我们 用 





个 正则 表达 式 改 造 前 面 的 脚 


本 4-6。 这 个 脚本 建立 了 一 个 三 状态 秋 转 器 。 它 是 一 个 有 用 的 脚本 ， 但 是 有 一 个 缺点 : 它 要 求 给 希望 
操纵 的 每 个 图 像 加 上 它 自己 的 id。 这 并 不 太 困难 ， 但 是 可 以 使 用 JavaScript 构建 页 面 元 素 的 名 称 ， 从 












































而 减少 工作 量 。 

现在 ， 你 应 该 回顾 一 下 脚本 4-5 和 脚本 4-6 的 工作 方式 。 稍 等 片刻 ， 我 们 继续 前 进 。 

脚本 4-6 原来 根据 每 个 图 像 的 id 动态 地 创建 图 像 的 _click 和 _on 名 称 。 现 在 不 这 样 做 ,而 是 根据 
每 个 图 像 的 _off 名 称 动态 地 创建 _click 和 _on 名 称 。 这 样 就 不 需要 图 像 id To 脚本 7-9 演示 了 实现 方 
法 。 修 改 JavaScript 并 没有 改变 这 个 页 面 的 外 观 或 行为 ， 但 是 创建 HTML 页 面 所 需 的 工作 量 减少 了 














脚本 7-9 可 以 使 用 正则 表达 式 减 少 编 写 或 修改 HTML 文件 的 工作 量 


window.onload = rolloverInit; 


function rolloverInit() { 


} 


for (var i=0; i<document.images.length;i++) { 
if (document. images[i].parentNode.tagName.toLowerCase() == 
setupRollover(document.images[i]); 


function setupRollover(theImage) { 


var re = /\s*_off\s*/; 


theImage.outImage = new Image(); 

theImage.outImage.src = theImage.src; 

theImage.onmouseout = function() { 
this.src = this.outImage.src; 


} 


theImage.overImage = new Image(); 
theImage.overImage.src = theImage.src.replace(re,"_on"); 
theImage.onmouseover = function() { 
this.src = this.overImage.src; 
} 


theImage.clickImage = new Image(); 
theImage.clickImage.src = theImage.src.replace(re,"_click"); 
theImage.onclick = function() { 
this.src = this.clickImage.src; 
} 


theImage.parentNode.childImg = theImage; 
theImage.parentNode.onblur = function() { 

this.childImg.src = this.childImg.outImage.src; 
} 


theImage.parentNode.onfocus = function() { 
this.childImg.src = this.childImg.overImage.src; 
} 


ra") { 
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l. var re = /Ns* off\s*/; 
这 一 行 设置 一 个 新 的 正则 表达 式 模式 ， 它 在 字符 串 中 的 任何 地 方 寻找 文本 _off。 
2. theImage.overImage.src = theImage.src.replace(re," on"); 
脚本 4-6 中 的 这 一 行 是 theImage.overImage.src ="images/"+ thelmage.id + "on.gif";。 新 的 代 
码 使 用 re 模式 查找 特殊 的 字符 串 ， 如 果 找 到 ,就 奉 换 它 。 本 例 中 我 们 搜索 字符 串 中 的 _off, 并 把 它 替 
换 为 on。 这 样 我 们 就 不 必 为 在 图 像 上 设置 id 属性 费心 了 ， 根 本 不 需要 id To 
3. theImage.clickImage.src = thelmage.src.replace(re," click"); 
脚本 4-6 中 的 这 一 行 是 thelmage.clicklmage.src ="images/"+ thelmage.id + " click.gif";. #f 
的 代码 搜索 _off 并 且 将 它 蔡 换 为 _ click。 
V 提示 
口 如 果 你 的 图 像 采 用 .gif、.jpg 和 .png 三 种 格式 ,这 个 脚本 也 会 很 方便 。 现 在 的 JavaScript 代码 其 
至 不 需要 知道 每 个 图 像 的 扩展 名 是 什么 。 
O 你 可 能 已 经 注意 到 ,这 个 脚本 末尾 的 一 些 代 码 是 脚本 4-6 中 没有 的 。 在 这 里 添加 这 些 代 码 是 为 
了 提高 可 访问 性 。 现 在 , 那些 使 用 键盘 而 不 用 鼠标 的 用 户 可 以 通过 制 表 键 移动 到 图 像 上 ,这 会 
产生 与 把 鼠标 移动 到 图 像 上 相同 的 效果 。 
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件 是 用 户 在 访问 页 面 时 执行 的 操作 。 当 浏览 器 探测 到 一 个 事件 时 ， 比 如 用 鼠标 单 击 或 按键 ， 
它 可 以 触发 与 这 个 事件 相关 联 的 JavaScript 对 象 ， 这 些 对 象 称 为 事件 处 理 程序 (eventhandler )。 
在 本 书 前 面 的 许多 地 方 , 你 已 经 见 到 了 使 用 事件 处 理 程序 的 示例 。 但 是 , 事件 处 理 是 一 项 重要 的 技术 ， 
而 且 它 实际 上 包含 了 用 户 与 页 面 的 所 有 交互 ， 所 以 值得 用 单独 的 一 章 来 讲解 它 。 
在 本 章 中 ， 你 将 看 到 如 何 使 用 事件 处 理 程序 来 操作 窗口 、 捕 获 鼠 标 移动 和 单 击 、 处 理 表单 事件 以 
及 在 用 户 按 下 键盘 上 的 键 时 作出 响应 。 


8.1 处 理 窗口 事件 


当 用 户 执 行 某 些 会 影响 整个 浏览 器 窗口 的 操作 时 ， 就 会 发 生 窗口 事件 。 最 常见 的 窗口 事件 是 通过 
打开 某 个 网 页 来 加 载 窗口 。 还 有 在 窗口 关闭 、 移 动 或 转 到 后 人 台 时 触发 事件 处 理 程序 的 事件 。 

在 使 用 事件 处 理 程序 时 ,常常 会 发 现 使 用 点 号 语法 将 事件 处 理 程序 与 一 个 对 象 连接 起 来 是 有 意义 
的 ， 如 下 所 示 : 


window. onfocus 
window. onload 
document . onmousedown 


注意 , 像 这 样 将 事件 处 理 程序 作为 对 象 的 一 部 分 使 用 时 , 事件 处 理 程序 的 名 称 是 全 小 写 的 。 另 外 ， 
更 符合 OR IDEA. 将 事件 处 理 程序 放 在 外 部 脚本 而 不 是 HTML 标签 中 ， 这 样 可 以 将 JavaScript 代 
码 与 HTML 代码 分 隔 开 ， 而 且 在 一 个 外 部 文件 中 编辑 ( 或 替换 ) 所 有 JavaScript 代码 会 更 容易 。 


8.1.1 onload 事件 


在 本 书 中 , 我 们 经 常 使 用 onload 事件 。 当 用 户 进 入 页 面 而 且 所 有 页 面 元 素 都 完成 加 载 时 ， 就 会 触 
发 这 个 事件 。 流行 的 广告 弹出 窗口 就 是 使 用 onload 事件 处 理 程序 的 典型 例子 , 尽管 这 种 方式 可 能 让 用 
户 不 快 。 

尽管 我 们 已 经 多 次 在 脚本 中 见 过 使 用 onload 的 情况 ， 但 是 到 目前 为 止 ， 我 们 一 直 回 避 了 一 个 重 
要 的 问题 : 如 果 在 加 载 页 面 时 需要 进行 多 个 操作 ， 那 么 应 该 怎么 做 ? 脚本 8-1 和 脚本 8-2 演示 了 具体 
做 法 。 
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脚本 8-1 ”多重 onload 示例 的 HTML 


<!DOCTYPE html» 
<html> 
<head> 
«title»Welcome!«/title» 
«script src="script01.js"></script> 
«/head» 
«body id-"pageBody"» 
«hi»Welcome to our Web site!</h1> 





«/body» 
«/html» 
脚本 8-2 ”使 用 新 的 addOnload() MAIL HAH onload 属性 
addOnload(initOne) ; 
addOnload(initTwo) ; 


addOnload(initThree) ; 


function addOnload(newFunction) { 
var oldOnload = window.onload; 


if (typeof oldOnload == "function") { 
window.onload = function() { 
oldOnload(); 
newFunction(); 


} 


} 
else { 

window.onload = newFunction; 
} 





} 


function initOne() { 
document .getElementById("pageBody").style.backgroundColor = "#00F"; 
} 


function initTwo() { 
document .getElementById("pageBody").style.color = "#F00"; 
} 


function initThree() { 
var allTags = document.getElementById("PageBoby")getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
if (allTags[i].nodeName == "H1") { 
allTags[i].style.border = "5px green solid"; 
allTags[i].style.padding - "25px"; 
allTags[i].style.backgroundColor = "#FFF"; 


} 
} 
} 


1. addOnload(initOne) ; 
addOnload(initTwo) ; 
addOnload(initThree) ; 
在 这 个 脚本 中 ,在 首次 加 载 页 面 时 ， 我 们 希望 发 生 完全 不 同 的 三 种 情况 。 设 置 window.onload = 
次 是 不 行 的 ， 因 为 第 二 次 设置 会 覆盖 第 一 次 的 ,第 三 次 设置 会 覆盖 第 二 次 的 。 相 反 ， 我 们 要 调用 一 个 
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Du. 


新 函数 addOnload(), 由 它 替 我 们 处 理 onload 处 理 程序 。 对 于 每 个 调用 , 传递 一 个 参数 : 在 触发 onload 
和 件 时 希望 运行 的 函数 的 名 称 。 结 果 见 图 8-1。 


aint 











Welcome to our Web site! 











图 8-1 这 个 脚本 设置 在 加 载 页 面 时 运行 的 多 个 onload 处 理 程序 ( 在 这 个 示例 中 ， 
用 于 进行 颜色 格式 化 ) 


2. function addOnload(newFunction) { 

与 其 他 函数 一 样 ， 这 一 行 开始 一 个 新 函数 。 传 递 给 它 的 参数 是 一 个 函数 名 。 

这 可 能 让 你 觉得 有 点 儿 困惑 ， 所 以 下 面 举 一 个 例子 。 我 们 并 不 调用 

window.onload = myNewFunction; 
而 是 调用 

addOnload(myNewFunction) ; 
{最终 效果 是 相同 的 。 

3. var oldOnload = window.onload; 

这 一 行 声明 一 个 新 变量 oldonload。 如 果 已 经 设置 了 window.onload， 就 将 它 的 值 存储 在 这 里 。 如 
果 还 没有 设置 ， 这 一 行 也 没什么 坏处 。 

4. if (typeof oldOnload == "function") { 

我 们 在 这 一 行 中 检查 oldonload 变量 的 类 型 。 如 果 已 经 设置 了 window.onload, 那么 它 应 该 是 一 个 
函数 调用 ( 否则 ， 就 是 空 的 )。 如 果 它 是 函数 ， 就 执行 以 下 代码 。 

5. window.onload = function() ( 


oldOnload(); 
newFunction(); 
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} 
这 些 代 码 重 新 设置 window. onload 的 值 来 完成 两 种 操作 : 它 之 前 所 做 的 操作 以 及 参数 中 传递 的 
新 函数 。window.onload 事件 处 理 程序 设置 为 一 个 匿名 函数 (没有 函数 名 的 函数 )。 然 后 执行 window. 
onload 原本 应 该 完成 的 操作 。 但 是 ， 在 函数 结束 之 前 ， 还 要 执行 newFunction()。 
6.else { 
window.onload = newFunction; 
} 
如 果 oldonload 不 是 函数 (也 就 是 说 ， 它 是 未 定义 的 ), 就 在 页 面 完 成 加 载 时 执行 新 函数 。 按 照 这 
种 方式 ， 我 们 可 以 多 次 调用 addOnload(): 第 一 次 它 将 自己 的 函数 赋值 给 window.onload; 第 二 次 和 第 
三 次 会 创建 匿名 函数 ， 让 JavaScript 执行 以 前 设置 的 操作 和 新 添加 的 函数 。 
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V 提示 
口 如 果 想 让 一 个 onload 处 理 程序 执行 多 个 操作 , 最 简单 的 方法 是 创建 一 个 执行 所 有 操作 的 函数 ， 
然后 让 onload 处 理 程序 调用 这 个 函数 。 但 是 ， 要 确保 每 个 函数 都 返回 。 例 如 ， 如 果 你 的 函数 
包含 对 本 身 的 setTimeout() 调 用 ， 它 将 不 会 返回 ， 因 此 不 会 到 达 被 调用 函数 的 其 余部 分 。 
口 如 果 你 正在 修改 现 有 的 代码 , 那么 很 容易 意外 地 重新 设置 window.onload 一 一 任何 HTML 页 面 
都 可 以 调用 多 个 外 部 JavaScript 文件 ， 这 些 文件 都 可 以 设置 事件 处 理 程序 。 如 果 其 中 一 个 文件 
直接 设置 了 window.onload, 但 是 每 次 你 都 在 此 之 后 调用 addOnload(), 那么 不 会 有 问题 。 但 是 ， 
如 果 在 设置 window.onload 之 后 (无论 是 直接 设置 ， 还 是 通过 addonload() )， 再 设置 
window.on1oad， 原 来 设置 的 函数 就 会 丢失 。 
口 这 个 脚本 在 一 定 程 度 上 基于 Simon Willison ( simonwillison.net ) 的 一 个 脚本 ， 在 本 书 中 使 用 它 
已 经 得 到 了 Simon 的 许可 。 
口 8.5 节 介 绍 了 另外 一 种 一 个 事件 处 理 程序 处 理 多 个 事件 的 方法 。 

























































































8.1.2 onunload 事 件 


当 用 户 离开 网 页 时 ,就 会 触发 onunload 事件 处 理 程序 。 这 个 事件 最 常见 的 用 途 是 ， 当 用 户 离 开 某 
些 商 业 站 点 ( 尤其 是 色情 站 点 ) 时 弹出 广告 窗口 。 如 果 你 访问 色情 站 点 的 话 ， 常 常会 发 现 几 乎 不 可 能 
离开 一 一 每 当 你 试图 关闭 窗口 或 导航 到 别处 时 ， 都 会 出 现 一 个 接 一 个 的 窗口 ， 重 新 打开 同样 的 页 面 或 
同类 的 其 他 页 面 。 因 此 ， 用 户 非常 讨厌 onunload 处 理 程序 ， 所 以 使 用 它 时 要 慎重 。 

但 是 ， 这 不 代表 onunload 处 理 程序 无 用 武之 地 ，6.1 节 的 脚本 6-3 就 展示 了 onunload 的 一 个 不 错 
的 用 法 。 
















































































8.1.8 onbeforeunload 事 件 


/E—# , onbeforeunload 的 作用 似乎 和 onunload 一 样 ， 但 两 者 有 个 很 大 的 区 别 : onbeforeunload 
在 用 户 开 始 离开 页 面 之 前 触发 ， 而 onunload 在 用 户 离开 页 面 之 后 触发 。 脚 本 8-3 和 脚本 8-4 展示 了 两 
者 的 不 同 。 


脚本 8-3 ”这 个 表单 很 简单 ， 我 们 想 确保 用 户 不 会 因为 意外 情况 离开 表单 


<!DOCTYPE html» 
<html> 
<head> 
<title>FabulousAirTickets.com</title> 
<script src="script02.js"></script> 
</head> 
<body> 
<h2>FabulousAirTickets.com</h2> 
<form action="#"> 
<p> 
<label for="from">From:</label> 
<input type="text" id="from"> 
&nbsp; &nbsp; 
<label for="to">To:</label> 
<input type="text" id="to"> 
</p> 
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<p> 


«label for-"leavedate"»DepartureDate:«/label» 
«input type-"date" id-"leavedate"» 


&nbsp; &nbsp; 


«label for="returndate">ReturnDate:</label> 


<input type-"date" id="returndate 
</p> 
<p> 
# of Adults: 
<select> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 
</p> 
<p> 


"> 


<input type="submit" value="Find Flights!"> 


&nbsp; &nbsp; 
<input type="reset"> 
</p> 
</form> 
</body> 
</html> 


脚本 8-4” 当 用 户 尝试 离开 页 面 的 时 候 ， 脚 本 会 警告 用 户 将 丢失 数据 


window.onbeforeunload = function() { 


return "If you close this window, your flight choices will be lost!"; 


} 


O window. onbeforeunload = function() { 
return "If you close this window, your flight choices will be lost!"; 


} 




















此 处 ， 我 们 想 警 告 用 户 : 如 果 他 们 离开 表单 ， 之 前 输入 的 所 有 信 ， 


























HISZEK. WRH onunload 


来 实现 这 个 功能 ， 用 户 之 前 输入 的 信息 就 全 没 了 ; 但 是 因为 这 里 使 用 的 是 onbeforeunload， 用 户 就 有 











机 会 决定 是 否 放弃 之 前 输入 的 信息 。 





函数 需要 返回 确认 对 话 框 中 呈现 给 用 户 的 信 





不 同 ， 实 际 上 ，Firefox 压根 就 不 用 函数 返 
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à T| 
FabulousAirT w re dara 


Departure Date: Wiis Return Dane: anarie 




















回 的 信息 。 





«oC Jl dropboxuse 


FabulousAirTickets.com 


图 8-2 确保 用 户 知道 他 们 正在 进行 什么 操作 。 不 同 浏 
依次 为 Firefox、Chrome il IE ) 


Leave thi Page 


x 





器 的 提示 信 ， 


息 ， 如 图 8-2 所 示 。 不 同 浏览 器 确认 对 话 框 中 的 信 ) 
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wy 














息 不 同 〈 从 左 到 右 


8.2 处理 和 鼠标 事件 153 





8.1.4 onresize fF 

当 窗 口 调整 大 小 时 ， 会 触发 onresize 事件 处 理 程序 。 
8.1.5 onmove# fF 

当 窗 口 移动 时 ， 会 触发 onmove 事件 处 理 程序 。 








8.1.6 ”onabort 事 件 


当 用 户 取 消 网 页 上 的 图 像 加 载 时 ， 会 触发 onabort 事件 处 理 程序 。 这 种 事件 不 太 常 用 ， 而 且 并 非 
所 有 浏览 器 都 支持 它 。 




















8.1.7 ”onerror 事 件 
当 页 面 上 发 生 JavaScript 错误 时 ， 可 能 会 触发 onerror 事件 处 理 程序 。 
v 提示 
O 在 Web 上 的 复杂 页 面 中 ， 设 置 onerror = null 会 比较 好 。 如 果 在 页 面 上 使 用 这 行 代码 ， 某 些 
错误 消息 将 不 会 向 用 户 显示 , 这 样 用 户 就 会 少 受 干扰 , 但 是 , 究竟 隐藏 哪些 错误 取决 于 浏览 器 












































8.1.8 onfocus 事 件 和 onblur 事 件 


onfocus 和 onblur 事件 处 理 程序 互 为 镜像 ， 听 起 来 就 像 现 实 中 你 在 JavaScript 程序 上 奋战 到 午夜 
一 样 。 当 一 个 页 面 成 为 最 前 面 的 活动 窗口 时 ， 就 会 触发 onfocus 处 理 程序 ; 而 当 一 个 页 面 退回 后 台 的 
时 候 ， 就 会 触发 onblur 事件 处 理 程序 。 

由 于 这 两 个 事件 处 理 程序 老 是 被 滥用 ， 大 多 数 现代 浏览 器 已 经 不 支持 它们 了 。 

















8.1.9 onscroll# 
当 用 户 向 上 或 者 向 下 滚动 页 面 时 ， 就 会 触发 onscroll 事件 。 














8.1.10 onDOMContentLoaded#= t+ 


onDOMContentLoaded 跟 onload 类 似 ， 只 是 它 是 在 页 面 自 身 完成 加 载 时 被 触发 ， 而 不 是 一 些 相关 文 
件 (如 图 片 ) 完成 加 载 时 被 触发 。 


8.2 处理 鼠 标 事件 


用 户 与 页 面 的 许多 交互 都 是 通过 鼠标 移动 或 鼠标 单 击 进行 的 。JavaScript 为 这 些 事件 提供 了 一 组 
强健 的 处 理 程序 。 
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8.2.1 onmousedown 事 件 


JavaScript 新 手 最 经 常 问 到 的 问题 之 一 是 ,“ 如 何 对 访问 我 的 页 面 的 用 户 隐 藏 脚本 ? ”答案 是 做 不 
到 。 如 果 用 户 足 够 有 毅力 的 话 ， 他 们 总 有 办 法 查 明 你 代码 中 的 内 容 。 

但 是 ， 如 果 你 确实 需要 对 一 般 水 平 的 访问 者 隐藏 代码 ， 那 么 脚本 8-5 和 脚本 8-6 可 以 防止 访问 者 
通过 鼠标 单 击 打开 快捷 菜单 ， 从 而 防止 他 们 查看 页 面 的 源 代码 。 
脚本 8-5 ”你 可 能 能 查看 这 个 页 面 的 源 代码 ,但 是 你 需要 做 一 些 工 作 


<!DOCTYPE html> 

<html> 

<head> 
<title>onMousedown capture</title> 
<script src="script03.js"></script> 

































































</head> 
<body> 
«hi»Important source data that someone might want to look at.</h1> 
</body> 
</html> 
脚本 8-6 ”这 个 脚本 会 阻止 经 验 不 太 丰 富 的 用 户 在 页 面 上 打开 快捷 菜单 
if (typeof document.oncontextmenu == "object") { 


if (document.all) { 
document.onmousedown = captureMousedown; 


} 
else { 
document.oncontextmenu = captureMousedown; 
} 
} 
else { 
window.oncontextmenu = captureMousedown; 
} 
function captureMousedown(evt) { 
if (evt) { 
var mouseClick = evt.which; 
else { 
var mouseClick = window. event.button; 
} 
if (mouseClick==1 || mouseClick==3) { 
alert("Menu Disabled"); 
return false; 
} 
} 
1. if (typeof document.oncontextmenu == "object") { 


if (document.all) { 
document.onmousedown = captureMousedown; 
} 
第 一 块 代 码 检查 浏览 器 是 否 是 Firefox, ， 这 种 浏览 器 使 用 window.oncontextmenu ( 因此 不 知道 
document .oncontextmenu )。 如 果 它 不 是 Firefox， 再 检查 document.all, MWA WAVER IE 的 


Ate 


简便 方法 。 如 果 它 是 正 ， 就 在 触发 onmousedown 时 运行 captureMousedown(). 
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2.else { 
document.oncontextmenu = captureMousedown; 
} 
如 果 到 达 了 这 里 ， 就 说 明 访 问 者 使 用 的 是 Safari 或 者 Chrome ， 这 种 浏览 器 需要 在 document 对 象 
上 设置 oncontextmenu。 
3. else { 
window.oncontextmenu - captureMousedown; 
} 
最 后 ， 如 果 浏览 器 是 Firefox, LE window 的 oncontextmenu 事件 调用 captureMousedown() 函 数 。 
4. function captureMousedown(evt) { 
这 个 函数 要 处 理 onmousedown 和 oncontextmenu 事件 。Chrome Safari 和 Firefox 在 触发 事件 时 会 
自动 地 生成 和 传递 evt 参数 ， 这 个 变量 包含 关于 事件 的 信息 。 











5. if (evt) { 
var mouseClick = evt.which; 
} 
else { 
var mouseClick = window.event.button; 
} 





如 果 evt 变量 存在 ， 就 可 以 通过 检查 evt which 来 判断 用 户 单 击 的 是 哪个 按钮 。 如 果 用 户 使 用 TE, 
用 户 操作 的 结果 会 在 window.event.button 中 找到 。 无 论 是 哪 种 情况 , 结果 都 存储 在 mouseClick 变量 中 。 

6. if (mouseClick==1 || mouseClick==3) { 

alert("Menu Disabled"); 
return false; 
} 

如 果 mouseClick 是 1 或 3， 就 弹出 一 个 警告 
框 ( 见 图 8-3), 向 用 户 指出 这 个 功能 已 经 禁用 了 ， 
并 且 返 回 false。 返 回 false 会 阻止 显示 菜单 窗口 。 

V 提示 

口 我 们 为 什么 要 检查 2 种 不 同 的 鼠标 单 击 ? 

检查 一 种 难道 不 够 吗 ? 从 理论 上 是 够 了 ， 
但 是 在 实际 上 不 够 ( 见 表 8-1 )。 问 题 是 在 
Mac E, 按 下 Ctrl 键 同 时 左 键 单 击 可 能 会 
触发 快捷 菜单 ， 因 此 需要 检查 右键 单 击 和 
左 键 单 击 两 种 情况 。 
口 但 是 ， 这 种 方法 可 能 有 负面 效果 : 你 可 能 
成 功 地 阻止 了 左 键 单 击 和 右键 单 击 ， 但 
是 ， 这 也 意味 着 阻止 用 户 单 击 页 面 上 的 任 ”图 8-3 ”这 个 警告 框 会 让 一 般 用 户 放弃 查看 源 代码 的 
何 链接 。 企图 ( 也 会 给 有 经 验 的 用 户 制造 点 儿 障 碍 ) 
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表 8-1 鼠标 单 击 编码 





编 码 事件 浏览 器 
1 左 键 单 击 TE 
所 有 Mac 浏 览 器 
3 右键 单 击 所 有 浏览 器 


v 提示 

O 对 于 有 经 验 的 访问 者 , 回避 这 个 脚本 的 控制 是 非常 容易 的 : 他 们 只 需 在 浏览 器 中 关闭 JavaScript 
功能 ， 单 击 功 能 就 会 恢复 了 。 将 JavaScript 代码 放 在 外 部 的 .js 文件 中 似乎 也 能 阻碍 用 户 查 看 源 
代码 , 但 是 用 户 可 以 查看 硬盘 上 的 缓存 文件 夹 。 他 们 也 可 以 查看 页 面 的 源 代码 ,找到 外 部 脚本 
文件 的 名 称 ， 然 后 在 浏览 器 中 输入 外 部 文件 的 URL， 这 样 就 可 以 正常 地 显示 文件 的 内 容 。 如 
果 你 确实 很 担心 自己 的 源 代码 泄露 出 去 , 那么 唯一 真正 可 靠 的 保密 方法 是 不 把 它 放 在 Web Eo 

口 IE 理解 document .oncontextmenu, 所 以 你 可 能 认为 可 以 通过 设置 它 来 处 理 这 些 事件 一 一 但 是 不 
fT, IE 是 唯一 需要 设置 document.onmousedown 的 浏览 器 。 另 外 , 如 果 同 时 设置 window.oncontex 
tmenu 和 document.onmousedown, Firefox 会 触发 每 个 事件 两 次 ， 每 个 操作 一 次 。 













































































8.2.2 ”onmouseup 事 件 
与 onmousedown 事件 相似 ，onmouseup 事件 会 在 用 户 单 击 鼠标 然后 释放 按钮 时 触发 。 





8.2.3 ”onmousemove 事 件 


当 页 面 的 访问 者 移动 鼠标 时 ， 就 会 触发 onmousemove 事件 。 在 这 个 示例 中 ， 我 们 让 用 户 觉得 有 一 
双眼 睛 一 直 盯 着 他 们 的 鼠标 移动 ( 见 图 8-4 )。 脚 本 8-7、 脚 本 8-8 和 脚本 8-9 演示 如 何 使 用 JavaScript 
显示 “一 对 眼睛 ”"， 它 们 会 随 着 访问 者 移动 鼠标 而 转动 。 
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图 8-4 ”无论 鼠标 指针 移动 到 哪里 ， 这 对 眼睛 都 会 一 直 采 着 它 
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脚本 8-7 ”“ 紧 跟着 的 眼睛 ”示例 的 HTML 


<!DOCTYPE html» 
<html> 
<head> 
<title>Mouse Movements</title> 
<link rel="stylesheet" href="script04.css"> 
<script src="script04.js"></script> 
</head> 
<body> 
<img src-"images/circle.gif" alt-"left eye" id="lEye"> 
«img src-"images/circle.gif" alt="right eye" id="rEye"> 
«img src-"images/lilRed.gif" alt-"left eyeball" id-"lDot"» 
«img src-"images/lilRed.gif" alt-"right eyeball" id-"rDot"» 
«/body» 
«/html» 


脚本 80-8 “ 紧 跟 着 的 眼睛 ”示例 的 CSS 


body { 
background-color: #FFF; 
} 


#lEye, #rEye { 
position: absolute; 
top: 100px; 
width: 24px; 
height: 25px; 





} 


#1Dot, #rDot { 
position: absolute; 


top: 113px; 
width: 4px; 
height: 4px; 
} 
#lEye { 
left: 100px; 
} 
#rEye { 
left: 150px; 
} 
#1Dot ( 
left: 118px; 
} 
#rDot { 
left: 153px; 
} 


脚本 8-9 这 个 脚本 让 眼睛 一 直 盯 着 用 户 的 鼠标 指针 


document.onmousemove = moveHandler; 





function moveHandler(evt) ( 
if (levt) ( 
evt = window.event; 


} 
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animateEyes(evt.clientX, evt.clientY); 


) 


function animateEyes(xPos,yPos) ( 
var rightEye - document.getElementById("rEye"); 
var leftEye - document.getElementById("lEye"); 
var rightEyeball - document.getElementById("rDot").style; 
var leftEyeball - document.getElementById("lDot").style; 


leftEyeball.left = newEyeballPos(xPos, leftEye.offsetLeft) ; 
leftEyeball.top = newEyeballPos(yPos, leftEye.offsetTop) ; 
rightEyeball.left = newEyeballPos(xPos, rightEye.offsetLeft) ; 
rightEyeball.top = newEyeballPos(yPos, rightEye.offsetTop) ; 


function newEyeballPos(currPos,eyePos) { 
return Math.min(Math.max(currPos,eyePos+3), eyePos+17) + "px"; 
} 
} 


1. document .onmousemove = moveHandler; 
对 于 所 有 浏览 器 ， 如 果 触 发 了 mousemove 事件 ， 就 调用 moveHandler()P&Z&. 
2. function moveHandler(evt) { 
if (levt) { 
evt = window.event; 
} 
animateEyes(evt.clientX,evt.clientY); 
} 
每 当 发 生 mousemove 事件 时 ， 就 会 触发 moveHandler() 函 数 。 如 果 访 问 者 使 用 IEE， 就 需要 对 evt 
进行 初始 化 ,然后 对 于 所 有 浏览 器 ,调用 animateEyes() 函 数 并 且 将 鼠标 指针 的 三 和 了 坐标 传递 给 它 。 
3. function animateEyes(xPos,yPos) { 
这 个 函数 根据 传递 给 它 的 蕊 和 了 坐标 转动 眼睛 。 
4. var rightEye = document.getElementById("rEye"); 
var leftEye - document.getElementById("lEye"); 




















var rightEyeball - document.getElementById("rDot").style; 
var leftEyeball - document.getElementById("lDot").style; 
这 些 代码 将 变量 设置 为 左右 眼眶 图 像 和 瞳孔 图 像 的 id。 
5. leftEyeball.left = newEyeballPos(xPos, leftEye.offsetLeft) ; 
leftEyeball.top = newEyeballPos(yPos, leftEye.offsetTop) ; 
rightEyeball.left = newEyeballPos(xPos, rightEye.offsetLeft) ; 
rightEyeball.top = newEyeballPos(yPos, rightEye.offsetTop) ; 
这 些 代码 根据 鼠标 指针 的 位 置 绘制 眼球 ， 其 中 使 用 了 下 一 步 中 定义 的 newEyeballPos() RTAS 


6. function newEyeballPos(currPos,eyePos) { 

















return Math.min(Math.max(currPos, eyePost+3),eyePost+17) + "px"; 


} 
我 们 不 希望 眼球 跑 到 眼眶 外 边 。 所 以 对 于 每 只 眼球 ,我 们 要 确保 它 尽 可 能 接近 鼠标 指针 ， 同 时 仍 
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然 在 眼眶 范围 内 。 
v 提示 
O Web 上 有 一 种 常见 的 JavaScript 效果: 页 面 上 有 许多 点 (或 者 设计 者 希望 的 其 他 东西 ) 一 直 跟 
随 着 鼠标 指针 的 移动 。 我 们 不 想 重复 已 经 存在 的 效果 ， 所 以 设计 了 转动 的 眼睛 。 但 是 ， 如 果 你 
希望 在 页 面 上 显示 尾随 鼠标 指针 的 点 ， 那 么 你 应 该 能 够 通过 修改 这 个 脚本 来 实现 。 



































8.2.4 onmouseover 事件 


现在 ， 你 应 该 很 熟悉 这 个 事件 了 : 我 们 曾经 利用 它 实 现 图 像 翻转 器 。 当 鼠标 移动 进 任何 注册 了 
onmouseover 事件 处 理 程序 的 区 域 时 ， 就 会 触发 这 个 事件 。 








8.2.5 ”onmouseout 事件 


毫 无 疑问 ， 既 然 有 onmouseover ， 当 然 也 有 对 应 的 onmouseout。 当 鼠标 离开 一 个 注册 了 此 事件 的 
区 域 时 ， 就 会 触发 这 个 事件 。 





8.2.6 ondblclick 事 件 


因特网 的 缺点 之 一 是 , 计算 机 用 户 已 经 习惯 的 用 户 界 面 元 素 在 Web 上 改变 了 。 例如 , 计算 机 新 用 
户 最 早 学 习 的 操作 就 是 用 鼠标 进行 双击 , 但 是 在 Web 上 没有 双击 操作 ， 至 少 不 曾 有 过 。 但 是 , 现在 可 
以 使 用 脚本 8-10、 脚 本 8-11 和 脚本 8-12 检查 鼠标 双击 。 


脚本 8-10 ”这 个 HTML 帮助 处 理 双 击 


<!DOCTYPE html» 
<html> 
<head> 
<title>Image Popup</title> 
<link rel="stylesheet" href="script05.css"> 
<script src="script05.js"></script> 
</head> 
<body> 
<h3>Double-click on an image to see the full-size version</h3> 
<img src="images/Imgo_thumb.jpg" alt="Thumbnail 0" id="Imgo"> 
<img src="images/Img1_thumb.jpg" alt="Thumbnail 1" id="Img1"> 
<img src="images/Img2_thumb. jpg" alt-"Thumbnail 2" id="Img2"> 
</body> 
</html> 


脚本 8-11 这 段 CSS 使 你 的 图 像 看 起 来 更 好 看 


body { 
background-color: #FFF; 
} 












































img { 
margin: 0 10px; 
border: 3px #00F solid; 
width: 160px; 
height: 120px; 
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脚本 8-12 ”用 这 个 脚本 捕获 和 处 理 双击 


window.onload = initImages; 


function initImages() { 
for (var i=0; i<document.images.length;i++) { 
document. images[i].ondblclick = newWindow; 
} 
} 


function newWindow() { 
var imgName = "images/" + this.id + ".jpg" 
var imgWindow = window.open(imgName,"imgWin", "width=320,height=240, scrollbars=no" ) 


} 

口 document. images[i].ondblclick = newWindow; 

当 用 户 双击 缩 略 图 之 一 时 ,就 会 触发 newWindow() 事 件 处 理 函 数 。 此 时 会 弹出 一 个 新 窗口 ( 见 图 8-5 ), 
其 中 显示 图 像 的 大 版 本 。 








*& P.dropboxssercoment.com 


Double-click on an image to see the full-size version 


Sal == a 


ANONA mg? jog 320x240 pixeis 

















图 8-5 双击 缩 略 图 ， 就 会 打开 该 图 像 的 大 版 本 





8.2.7 ” onclick 事件 


onclick 处 理 程序 的 工作 方式 与 ondblclick 处 理 程序 相似 ， 差 异 仅 仅 是 由 单 击 触 发 它 ， 而 不 是 双 
击 触 发 。onmouseup 处 理 程序 也 相似 ， 差 异 是 onclick 要 求 用 户 按 下 鼠标 按钮 并 放 开 才能 触发 ， 而 
onmouseup 只 需要 后 者 。 


8.3 ”表单 事件 处 理 
表单 事件 处 理 主要 用 来 验证 表单 。 通过 使 用 下 














掉 列 出 的 事件 , 可 以 处 理 用 户 在 表单 上 所 做 的 任何 操作 。 











8.3.1 onsubmit 事 件 


当 用 户 单 击 Submit 按钮 来 提交 表单 时 ， 就 会 触发 onsubmit 处 理 程序 ( 参见 第 6 章 )。 另 外 ,根据 
浏览 器 的 不 同 ， 当 用 户 退 出 表单 上 的 最 后 一 个 文本 输入 字段 时 ， 也 可 能 会 触发 它 。 如 果 脚 本 包含 


83 ”表单 事件 处 理 161 





onsubmit 处 理 程序 ， 而 且 这 个 处 理 程序 的 结果 是 false， 那 么 表单 就 不 会 发 送 回 服务 器 。 


8.3.2 ”onreset 事 件 


当 用 户 单 击 表单 上 的 Reset 按钮 (如 果 有 这 个 按钮 的 话 ) 时 ， 就 会 触发 onreset 处 理 程序 。 如 果 
表单 具有 在 加 载 页 面 时 设置 的 默认 值 ， 这 会 非常 方便 一 一 如 果 用 户 单 击 Reset 按钮 ， 就 需要 用 脚本 动 
态 地 重新 设置 默认 值 。 















































8.3.8 ”onchange 事件 


如 脚本 6-3 所 示 ， 当 用 户 修改 表单 字段 时 ， 就 会 触发 onchange 事件 处 理 程序 。 这 可 以 用 来 立即 验 
证 输入 的 信息 ， 或 者 在 用 户 单 击 Submit 按钮 之 前 对 用 户 的 选择 作出 响应 。 








8.3.4 onselect 事 件 
如 果 用 户 选 择 了 一 个 input 或 textarea 表单 区 域 中 的 文本 ， 就 会 触发 onselect 处 理 程序 。 








8.3.5 ”onclick 事件 


8.2 节 提 到 了 onclick 处 理 程序 , 这 里 再 次 提 到 它 是 因为 在 处 理 表单 时 经 常会 用 到 它 。 如 脚本 6-15 
所 示 ， 当 用 户 单 击 复 选 框 或 单 选 按钮 时 ， 就 会 触发 这 个 事件 。 脚 本 2-10 也 使 用 了 onclick 处 理 程序 。 
在 那个 示例 中 , 它 让 一 个 链接 对 支持 JavaScript 的 浏览 器 执行 一 种 操作 , 而 对 不 支持 JavaScript 的 浏览 
器 执行 完全 不 同 的 另 一 种 操作 。 





























8.3.6 onblur 事 件 


onblur 事件 可 以 用 于 浏览 器 窗口 〈 如 前 面 所 示 )， 也 经 常用 在 表单 上 。 脚 本 8-13 、 脚 本 8-14 和 脚 
本 8-15 演示 如 何 使 用 onblux 处 理 程序 迫使 用 户 在 一 个 字段 中 输入 数据 。 


脚本 8-13 ”这 个 HTML 创建 一 个 简单 的 表单 


<!DOCTYPE html> 
<html> 
<head> 
<title>Requiring an entry</title> 
<link rel="stylesheet" href="script06.css"> 
<script src="script06.js"></script> 
</head> 
<body> 
<form action="#"> 
<h3> 
Email address: <input type="text" class="reqd"><br><br> 
Name (optional): <input type="text"> 
</h3> 
</form> 
</body> 
</html> 
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脚本 8-14 — 5j JavaScript 配合 的 CSS 


body { 
background-color: #FFF; 


.highlight { 
background-color: #FF9; 


脚本 8-15 ” 当 用 户 离开 一 个 表单 字段 时 ， 可 以 在 表单 中 使 用 onblur 处 理 程序 触发 操作 


window.onload = initForm; 


function initForm() { 
var allTags = document.forms[0].getElementsByTagName("*"); 


for (var i=0; i«allTags.length; i++) { 
if (allTags[i].className.indexOf("reqd") > -1) { 
allTags[i].onblur - fieldCheck; 


} 
} 
function fieldCheck() { 
if (this.value == "") { 
this.className += " highlight"; 
this. focus(); 
else { 
this.className = "reqd"; 
} 


1. if (allTags[i].className.indexOf("reqd") > -1) { 
我 们 使 用 class 属性 ( reqd ) 在 运行 时 决定 什么 时 候 应 该 使 用 onblur 事件 处 理 程序 。 只 需 在 输入 
标签 中 添加 class="Treqd" 就 可 以 触发 这 个 事件 ， 而 不 需要 在 各 个 字段 上 分 别 设置 onblur 处 理 程序 。 
2. allTags[i].onblur = fieldCheck; 
当 用 户 离开 必须 填写 的 字段 时 ， 字 段 上 的 这 个 事件 处 理 程序 会 调用 fieldCheck() 函 数 。 
3. function fieldCheck() { 
if (this.value == "") { 
this.className += " highlight"; 
this. focus(); 
} 


else { 






































this.className = "reqd"; 
} 
} 
fieldCheck() 函 数 检查 在 当前 字段 中 是 否 输 入 了 某 些 信息 。 如 果 这 个 字段 还 没有 值 ， 那 么 通过 将 
"highlight" 添 加 到 它 的 class 属性 上 ， 将 字段 的 背景 颜色 改 为 浅黄 色 (ILE 8-6 )， 并 且 用 focus OE 
焦点 重新 放 回 这 个 表单 字段 中 。 纠 正 了 错误 之 后 ， 简 单 地 将 class 属性 重新 设置 为 其 初始 值 ， 背 景 颜 
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色 就 恢复 为 白色 。 
FT 4 _ EHI" 
| E Requiring an entry | + | 
€ @ hittps://dl.dropbo: Cl 图 -cp & 会 D- 


Email address: 


Name (optional): | 























图 8-6 ”如 果 用 户 离 开 Email address 字段 ， 但 是 没有 输入 任何 内 容 ， 那 么 字段 变 成 黄色 
的 并 且 保 持 活跃 ， 直 到 输入 了 数据 为 目 








v 提示 

口 当 用 户 在 改变 字段 之 后 离开 它 时 ， 会 触发 onblur 和 onchange 两 种 事件 。 如 果 用 户 在 没有 改变 

字段 内 容 的 情况 下 离开 ， 就 只 触发 onblur 处 理 程序 。 

口 当前 的 Firefox 版 本 在 focus() 方 面 有 一 个 问题 : 尽管 focus() 要 求 浏览 器 将 焦点 留 在 一 个 字段 
中 ,但 是 Firefox 不 这 么 做 。 但 是 ， 背 景 颜色 的 改变 会 提醒 用 户 出 了 错误 ， 所 以 他 们 仍然 知道 
这 个 字段 有 问题 。 





























8.3.7 onfocus 事 件 


有 时 候 ， 页 面 上 的 某 个 表单 字段 包含 只 读数 据 ， 这 一 数据 要 在 表单 上 显示 ， 但 是 不 希望 用 户 修改 
它 。 可 以 使 用 HTML 属性 readonly 避免 用 户 修 改 字段 ， 但 是 并 非 所 有 浏览 器 都 支持 这 个 属性 。 脚 本 
8-16 和 脚本 8-17 演示 如 何 使 用 onfocus 事件 迫使 用 户 离开 这 个 字段 , 从 而 避免 用 户 修改 他 们 不 应 该 修 
改 的 字段 。 


脚本 8-16 ”这 个 HTML 创建 一 个 表单 ， 其 中 的 电子 邮件 字段 不 允许 修改 


<!DOCTYPE html» 
<html> 
<head> 
<title>Forbidding an entry</title> 
<script src="script07.js"></script> 
</head> 
<body> 
<form action="#"> 
<h3> 
Your message: <textarea rows="5" cols="30">Enter your message here </textarea> 
<br><br> 
Will be sent to: <input type="text" value="js9@javascriptworld.com" readonly size="25" /> 
</h3> 
</form> 
</body> 
</html> 
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脚本 8-17 在 表单 上 使 用 onfocus 处 理 程序 防止 任意 修改 数据 


window.onload = initForm; 


function initForm() { 
var allTags = document.forms[0].getElementsByTagName("*") ; 


for (var i=0; i«allTags.length; i++) { 
if (allTags[i].readOnly) { 
allTags[i].onfocus = function() { 
this.blur(); 


} 
} 
} 


C) allTags[i].onfocus = function() { 
this.blur(); 
} 
当 用 户 试图 进入 这 个 字段 时 ,焦点 ( 本 例 中 是 活动 的 字段 ) 会 立刻 自动 地 转移 ( 见 图 8-7 )。 这 是 
因为 onfocus 事件 处 理 程序 调用 一 个 匿名 函数 (没有 名 字 的 函数 ) 这 个 函数 只 做 一 件 事 : 在 当前 字段 
上 调用 blur()， 从 而 使 焦点 转移 。 


























Your message: 


Will be sent to: |js9@javascriptworld com 











图 8-7 用户 无 法 在 下 面 的 字段 中 输入 任何 信息 











em 


8.4 eS Abe 





除了 鼠标 之 外 ,， 另 一 种 主要 的 输入 设备 是 键盘 。 除 非 以 后 出 现 直接 用 思想 控制 的 计算 机 设备 ， 否 
则 计算 机 还 是 离 不 开 键盘 。 与 鼠标 一 样 ，JavaScript 也 为 处 理 键盘 提供 了 一 些 事件 。 























8.4.1 onkeydown 事 件 


如 果 用 户 能 够 用 键盘 和 鼠标 两 种 方式 控制 网 页 ， 那 么 会 很 方便 。 通 过 使 用 键 事件 处 理 程序 ， 可 以 
在 用 户 按 下 适当 的 键 时 执行 相应 的 操作 。 在 脚本 8-18 、 脚 本 8-19 和 脚本 8-20 中 ， 通 过 按键 盘 上 的 左 
右 箭头 键 ， 可 以 查看 标准 的 约 灯 片 〈 与 脚本 4-19 中 使 用 的 幻灯 片 相同 )， 见 图 8-8。 
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Boo mage Shde show 











Use the right and left arrows on your keyboard to view the slideshow 
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图 8-8 这 个 幻灯 片 由 键盘 控制 ， 而 不 是 由 鼠标 身 
脚本 8-18 幻灯 片 的 HTML 


<!DOCTYPE html> 
<html> 
<head> 
<title>Image Slideshow</title> 
<link rel="stylesheet" href="script08.css"> 
<script src="script08.js"></script> 
</head> 
<body> 
«h3 class="centered"> 
<img src="images/callisto.jpg" id-"myPicture" alt="Slideshow"><br> 
Use the right and left arrows on your keyboard to view the slideshow 
</h3> 
</body> 
</html> 


脚本 8-19 CSS 再 次 使 图 像 看 起 来 更 好 看 


body { 
background-color: #FFF; 
} 





十 导航 按钮 来 控制 











.centered { 
text-align: center; 
} 


img#myPicture { 
width: 262px; 
height: 262px; 
} 


脚本 8-20 在 这 个 脚本 中 使 用 onkeydown 处 理 程序 执行 幻灯 片 的 切换 


document.onkeydown = keyHit; 
var thisPic = 0; 


function keyHit(evt) { 
var myPix = new Array("images/callisto.jpg", "images/europa.jpg","images/io. jpg", "images/ 
'ganymede. jpg"); 
var imgCt - myPix.length-1; 
var ltArrow = 37; 
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var rtArrow = 39; 


if (evt) { 
var thisKey = evt.which; 


else { 
var thisKey = window.event.keyCode; 


if (thisKey == ltArrow) { 
chgSlide(-1); 


else if (thisKey == rtArrow) { 
chgSlide(1); 


function chgSlide(direction) { 
thisPic = thisPic + direction; 
if (thisPic > imgCt) { 
thisPic = 0; 
} 
if (thisPic < 0) { 
thisPic = imgCt; 


document. getElementById("myPicture").src = myPix[thisPic]; 


} 
} 


1. document.onkeydown = keyHit; 

这 里 将 keyHit() 函 数 注册 为 onkeydown 事件 处 理 程序 。 

2.var thisPic = 0; 

在 全 局 范围 对 变量 thisPic 进行 初始 化 和 设置 ， 因 此 它 存储 全 局 的 值 ， 在 每 次 调用 keyHit() 时 都 
可 以 使 用 这 个 变量 

3. function pennant) { 

keyHit() 函 数 处 理 击 键 事 件 。 


4. var ltArrow = 37; 



































var rtArrow = 39; 
左 箭头 键 产生 数字 37， 右 箭头 键 产生 39。 我 们 将 这 些 值 存储 在 变量 中 ， 用 来 判断 用 户 按 下 的 是 
哪个 键 。 
S. if (evt) ( 
var thisKey = evt.which; 


} 


else { 























var thisKey = window.event.keyCode; 


} 


了 解 用 户 按 下 哪个 键 的 方法 取决 于 他 们 使 用 的 浏览 器 。 如 果 是 Firefox, Chrome 或 Safari, 就 查看 
evt .which， 这 个 属性 包含 键 的 编码 。 如 果 是 正 ， 那 么 编码 包含 在 window.event.keyCode 中 。 无 论 是 
哪 种 情况 ， 都 将 结果 保存 在 thisKey 中 。 
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6. if (thiskey == ltArrow) { 
chgSlide(-1); 
} 
else if (thisKey == rtArrow) { 
chgSlide(1); 
} 
如 果 用 户 按 下 左 箭头 键 ， 就 将 约 灯 片 退 后 一 帧 ; 如 果 按 下 右 箭头 键 ， 就 将 约 灯 片 前 进 一 帧 。 如 果 
他 们 按 下 的 是 其 他 键 ， 就 不 执行 任何 操作 。 
V 提示 
O 如 果 不 确定 某 个 键 的 键 值 ， 可 以 在 步骤 5 和 步骤 6 的 代码 行 之 间 加 上 alert(thiskey); ， 然 后 
按 下 你 要 检查 的 键 。 这 个 警告 框 会 显示 键 值 。 























8.4.2 onkeyup 事 件 


onkeyup 事件 处 理 程序 与 onkeydown 处 理 程序 相同 , 唯一 的 差异 是 , 它 在 用 户 已 按 下 并 释放 键 的 过 
程 中 触发 。 





8.4.3 ”onkeypress 事 件 
当 用 户 按 下 并 释放 键 时 触发 onkeypress 事件 。 


8.5 高 级 事件 处 理 


除了 本 书 前 面 提 到 的 事件 处 理 , 还 有 另外 一 种 事件 处 理 模型 ， 通 常 称 为 DOM Level 2 事件 处 理 程 
序 。 这 种 更 为 灵活 的 新 方法 有 不 少 优点 。 

口 有 一 种 通用 的 方法 设置 儿 类 事件 处 理 程序 。 

口 可 为 单个 事件 注册 多 个 事件 处 理 程 序 , 也 就 是 说 添加 其 他 事件 处 理 程序 不 会 覆 写 已 有 的 事件 处 
理 程序 。 
O 能 够 控制 事件 冒 泡 或 者 捕获 〈 请 查看 补充 内 容 “ 冒 泡 和 捕获 ”)。 
口 事件 可 触发 其 他 事件 。 

口 事件 处 理 程 序 很 容易 被 移 除 。 

V 提示 

口 第 10 章 会 详细 讲解 文档 对 象 模 型 ( DOM )。 
































ifi 





8.5.1 addEventListener 方 法 











这 里 的 任务 跟前 一 个 任务 一 样 ， 只 是 这 个 事件 处 理 程序 是 通过 addEventListener() 设 置 的 ， 在 脚 
本 8-21 中 可 以 看 到 ， 结 果 如 图 8-9 所 示 。 
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Use the right and left arrows on your keyboard to view the slideshow 
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只 是 我 们 用 了 另外 


























种 方式 来 注册 事件 处 理 程序 


脚本 8-21 JavaScript 代码 非常 相似 ， 只 是 这 里 使 用 的 是 addEventListener() K% 


document .addEventListener("keydown", keyHit, false); 


var thisPic = 0; 


function keyHit(evt) { 


non 


var myPix = new Array("images/catseyenebula. jpg", "images/crabnebula.jpg", "images/eskimonebula. jpg", 


>"images/ringnebula. jpg"); 
var imgCt = myPix.length-1; 
var ltArrow = 37; 
var rtArrow = 39; 


if (evt) { 
var thisKey = evt.which; 


} 
else { 

var thisKey = window.event.keyCode; 
} 


if (thisKey == ltArrow) { 
chgSlide(-1); 


else if (thisKey == rtArrow) { 
chgSlide(1); 


function chgSlide(direction) { 
thisPic = thisPic + direction; 
if (thisPic > imgCt) { 
thisPic = 0; 


if (thisPic < 0) { 
thisPic = imgCt; 
} 


document. getElementById("myPicture").src 


myPix[thisPic]; 
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口 document .addEventListener("keydown" ,keyHit,false); 

此 处 , 我 们 注册 keyHit() 函 数 来 处 理 onkeydown 34/44, addEventListener() ea 3 个 参数 : 事件 
本 身 (目标 )、 触 发 事件 时 调用 的 函数 ( 监听 器 )， 以 及 用 来 指定 事件 被 捕获 (true ) 还 是 冒 泡 ( false ) 
的 布尔 值 。 

V 提示 

O 传递 给 addEventListener() 的 目标 事件 跟 本 章 其 他 地 方 使 用 的 事件 一 样 ， 省 略 了 开头 的 on。 























8.5.2 removeEventListenerHs& 
该 方法 允许 从 它 的 日 标 事件 移 除 事 件 监听 右 。 





8.5.8 ” dispatchEvent 方 法 


该 方法 允许 从 代码 中 的 其 他 位 置 触发 事件 处 理 程序 。 它 接收 一 个 参数 : Event 对象。 例如 ， 如 果 
要 创建 、 初 始 化 并 分 派 一 个 事件 来 点 击 链接 ， 代 码 可 以 这 样 : 


var evt = document.createEvent("Event"); 
evt.initEvent("click", true, false); 
document .getElementById("theLink").dispatchEvent(evt); 




















8.5.4 :initEvent 方 法 








该 方法 初始 化 已 创建 的 事件 (通常 是 通过 调用 document.createEvent("Event"); 来 实现 的 )。 它 接 
收 三 个 参数 : 事件 类 型 、 表 示 事 件 是 否 冒 泡 的 布尔 值 ， 以 及 表示 事件 能 否 被 取消 的 布尔 值 。 

V 提示 

口 表示 事件 冒 泡 的 布尔 值 是 false，initEvent() 是 个 例外 ， 它 用 true 表示 冒 泡 。 












































8.5.5 stopPropagation 方 法 
该 方法 阻止 触发 事件 流 中 的 其 他 事件 ， 它 没有 参数 。 














8.5.6 ”preventDefault 方 法 
该 方法 取消 正在 进行 的 事件 ( 如 果 该 事件 是 可 取消 的 )， 它 没有 参数 。 








冒 泡 和 捕获 
我 们 可 以 将 网 页 的 结构 想象 为 一 棵 树 。 比 如 说 网 页 的 主体 可 以 包含 表格 , 表格 本 身 又 包含 多 行 
而 表格 行内 包含 了 若干 单元 格 ， 见 图 8-10。 
比方 说 ， 你 编写 了 一 个 脚本 ， 就 会 弹出 提示 框 (alert )。 如 果 移 
你 希望 弹出 “ 移 过 单元 格 ” 的 提示 ， i 能 收 到 。 不 仅 如 此 ， 随 后 你 还 会 收 到 “ 移 过 
“ 移 过 表格 ”的 提示 ， 最 后 是 “ 移 过 主体 ”。 Pees 也 就 是 说 事件 从 树 的 下 面向 上 
oe pe 这 是 网 页 工作 的 一 般 方 式 。 
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第 9 章 
JavaScript 和 cookie 











Web 术语 中 ，cookie 是 一 小 段 信息 ， 当 用 户 第 一 次 访问 Web 服务 器 时 ， 服 务 器 将 这 些 信 息 
TE sse ao kPa BERL Web 站 点 时 ，Web 服务 器 可 以 通过 cookie 识别 
TAP. WAP cookie ( 其 中 包含 关于 访问 者 的 信息 ) 作为 纯 文 本 文件 保存 在 计算 机 硬盘 上 。 
作为 JavaScript 开发 人 员 ， 你 可 以 用 cookie 做 许多 有 意义 的 事情 。 如 果 你 的 站 点 要 求 注 册 ， 那 么 
可 以 用 cookie 将 访问 者 的 用 户 名 和 密码 保存 在 他 们 的 硬盘 上 , 这 样 他 们 就 不 需要 在 每 次 访问 时 都 输入 
用 户 名 和 密码 。 可 以 跟踪 用 户 已 经 访问 过 站 点 的 哪些 部 分 ， 以 及 统计 用 户 的 访问 次 数 。 
关于 cookie 有 许多 常见 的 误解 , 所 以 一 定 要 知道 cookie 不 能 实现 哪些 操作 : 无 法 获得 关于 用 户 的 
任何 真实 信息 ， 比 如 他 们 的 电子 邮件 地 址 ; 无 法 使 用 cookie 查看 用 户 硬 盘 上 的 内 容 ; cookie 也 无 法 传 
输 计算 机 病毒 。 cookie 只 是 用 户 硬盘 上 一 个 简单 的 文本 文件 , JavaScript 开发 人 员 可 以 在 其 中 存储 一 些 
信息 ， 仪 此 而 已 。 
cookie 总 是 包含 发 送 它 的 服务 器 的 地 址 。cookie 技术 背后 的 本 质 是 “识别 ”。 可 以 把 它 看 作 Web 上 
的 Caller ID ， 只 是 在 形式 方面 有 各 种 变化 一 一 每 个 使 用 cookie 的 Web 站 点 向 用 户 的 浏览 器 授予 某 种 
形式 的 个 性 化 ID , 这 样 在 用 户 下 一 次 访问 这 个 站 点 时 就 能 够 识别 出 他 。 当 用 户 再 次 访问 以 前 向 他 传递 
过 cookie 的 Web 服务 器 时 ， 服 务 器 可 以 查询 浏览 器 ， 了 解 这 个 用 户 是 否 拥 有 它 的 cookie. AIR, 
服务 器 就 可 以 获取 原来 传递 的 cookie 中 存储 的 信息 。 请 记 住 ，cookie 只 识别 使 用 的 计算 机 ， 而 不 识别 
使 用 这 人 台 计 算 机 的 人 。 






































9.1 建立 第 一 个 cookie 


cookie 是 一 个 具有 特定 格式 的 文本 字符 串 : 

cookieName=cookieValue; expires=expirationDateGMT ; path=URLpath; domain=siteDomain 

这 个 字符 串 的 第 一 部 分 给 cookie 命名 并 给 它 赋 值 。 这 是 cookie 中 唯一 必须 有 的 部 分 , 字符 串 的 其 
余部 分 都 是 可 选 的 。 接 下 来 是 cookie 的 过 期 日 期 ( expiration date )， 当 到 了 这 个 日 期 浏览 器 会 自动 
删除 这 个 cookie。 过 期 日 期 后 面 是 一 个 URL 路 径 ， 这 允许 在 cookie 中 存储 一 个 URL。 最 后 ， 可 以 在 
cookie 中 存储 一 个 域 值 。 

脚本 9-1 中 的 HTML 文件 调用 脚本 9-2 中 的 JavaScript， 它 会 根据 用 户 在 表单 中 输入 的 值 设 置 
cookie。 在 使 用 这 个 页 面 时 ， 表 面 上 看 不 出 什么 效果 ILE 9-1 )， 但 是 在 幕后 确实 创建 了 cookie。 本 
章 后 面 的 示例 将 在 这 个 示例 的 基础 上 进行 扩展 。 
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Firefox * 7| acorn 
Set a cookie based on a form | + 
€ * dropboxuse 8 P + A D- 


Enter your name: fom 








2 


图 9-1 虽然 在 表面 上 看 不 出 来 ， 但 是 表单 文本 字段 的 内 容 已 经 被 写 入 cookie 中 




















脚本 9-1 第 一 个 cookie WMH) HTML 


<!DOCTYPE html» 
<html> 
<head> 
<title>Set a cookie based on a form</title> 
<script src="script01.js"></script> 
</head> 
<body> 
<form id="cookieForm" action="#"> 
«hi»Enter your name: <input type="text" id="nameField"></h1> 
</form> 
</body> 
</html> 


脚本 9-2 ”使 用 这 个 脚本 设置 浏览 器 cookie 


window.addEventListener("1oad" nameFieldInit, false); 


function nameFieldInit() ( 
var userName - ""; 
if (document.cookie !- "") ( 
userName = document.cookie.split("=")[1]; 


} 


document. getElementById("nameField").value = userName; 
document. getElementById("nameField").onblur = setCookie; 
document. getElementById("cookieForm").onsubmit = setCookie; 


} 


function setCookie() { 
var expireDate = new Date(); 
expireDate. setMonth(expireDate. getMonth()+6) ; 


var userName = document.getElementById("nameField").value; 
document.cookie = "userName=" + userName + ";expires=" + expireDate.toGMTString(); 


document. getElementById("nameField").blur(); 
return false; 


} 


=> 设置 cookie 








1. function nameFieldInit() { 
首先 创建 函数 nameFieldInit() 来 定义 cookie 的 值 。 当 窗口 完成 加 载 时 ， 会 调用 这 个 函数 。 








91 建立 第 一 个 cookie 173 





2. var userName = 
接 下 来 ， 用 一 个 空 值 对 变量 userName 进行 初始 化 。 


3. if (document.cookie != "") { 


mu, 
3 





userName = document.cookie. split("=")[1]; 

这 个 条 件 测试 检查 document.cookie 对 象 是 否 不 包含 空 值 。split("=") 方 法 将 cookie 分 隔 成 一 个 
数组 , 数组 中 第 一 个 元 素 ( cookieField[0] ) 是 cookie MAM, 第 二 个 元 素 ( cookieField [1] ) 是 cookie 
的 值 。 注意 , 该 数组 可 以 是 存储 cookie 字段 的 任何 变量 。 这 里 将 document.cookie.split("=")[1] 返 回 
的 值 (也 就 是 cookie 的 值 ) 赋值 给 userName。 

4. document.getElementById("nameField").value = userName; 

如 果 cookie 文件 中 存储 了 一 个 用 户 名 ， 那 么 在 页 面 加 载 时 设置 getElementById ("nameField"). 
value 会 把 这 个 用 户 名 放 进 文本 字段 中 。 

5. document.getElementById("nameField").onblur = setCookie; 












































document.getElementById("cookieForm").onsubmit = setCookie; 
在 第 一 行 中 ， 当 用 户 离开 这 个 文本 字段 时 ，onblur 事件 处 理 程序 ( 见 第 1 章 和 第 8 章 ) 会 调用 
setCookie() 函 数 。 在 第 二 行 ， 表 单 的 onsubmit 事件 处 理 程序 做 同样 的 事情 。 如 果 用 户 在 输入 姓名 后 
按 Enter $E, IE 不 会 触发 onblur 处 理 程序 ( 由 于 某 些 原因 )。 添 加 onsubmit 处 理 程序 是 为 了 适应 所 有 
浏览 需 。 
6. function setCookie() { 
SUE gue 4-3 PRL setCookie(). 
7. var expireDate - new Date(); 
获得 当前 日 期 并 且 将 它 赋值 给 新 变量 expireDate. 
8. expireDate.setMonth(expireDate.getMonth()+6) ; 
这 一 行 取出 expireDate 的 月 份 部 分 ,在 月 份 上 加 6, 然后 将 expireDate 的 月 份 部 分 设置 为 新 的 值 。 
换 句 话说 ， 它 将 cookie 的 过 期 日 期 设置 为 创建 cookie 之 后 6 个 月 。 
9. var userName = document.getElementById("nameField").value; 
这 一 行 创 建 一 个 新 变量 userName, JF HH ECA BTA E, userName 变量 必须 
创建 两 次 ( 每 次 在 不 同 的 函数 中 )， 因 为 它 不 是 全 局 变量 ， 也 就 是 说 ， 可 以 在 每 个 函数 中 使 用 它 , 但 
是 并 不 指望 跨 函数 保持 它 的 值 一 一 在 每 个 函数 中 它 的 值 都 是 新 的 。 
10. document.cookie = "userName=" + userName + ";expires=" + expireDate.toGMTString(); 
这 里 是 写 cookie 的 地 方 。 请 记 住 ，cookie 仅仅 是 一 个 文本 字符 串 ， 所 以 可 以 使 用 任何 文本 字符 串 
操作 来 建立 cookie， 比 如 使 用 加 号 来 连接 字符 串 。 我 们 设置 document.cookie 以 包含 用 户 名 和 cookie 
过 期 日 期 。toGMTString() 方 法 将 Date 对 象 expireDate 转换 为 文本 字符 串 ， 以 便 将 它 写 人 cookie 中 。 
11. document .getElementById(“nameField”) .blur(); 
return false; 

那么 ， 如 何 设置 表单 ， 从 而 允许 以 两 种 方式 调用 setCookie()? 下 面 是 处 理 这 个 问题 的 方法 。 

口 如 果 浏 览 器 是 下 ,那么 第 一 行使 焦点 离开 name 字段 ， 从 而 表明 发 生 了 某 些 情况 。 第 二 行 〈 返 
In] false 值 ) 防止 实际 提交 表单 。 
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O WR aA IE, ABASIC EE ( 我们 已 经 离开 了 name 字段 ， 所 以 再 次 离开 它 
不 会 有 影响 )。 第 二 行 防止 触发 表单 提交 。 





多 个 cookie 
可 以 在 一 个 页 面 上 设置 多 个 cookie， 格 式 如 下 : 


"cookieName1=cookieValue1;expires=expirationDateGMT1;path=sitePath1;domain=siteDomain1"; 
"cookieName2-cookieValue2;expires-expirationDateGMT2; path-sitePath2;domain-siteDomain2" 


同样 ， 只 有 名 称 和 值 对 是 必须 有 的 字段 。 

split("; 中 命令 将 多 个 cookie 记录 分 隔 为 数组 ， 各 个 cookie 从 零 开 始 编号 。 注 意 ， 这 个 命令 
中 分 号 后 面 有 一 个 空格 。cookieArray[0] 是 多 个 cookie 记录 中 的 第 一 个 cookie, cookieArray[1]2& 
下 一 个 cookie， 以 此 类 推 。 更 多 细节 请 参见 本 章 后 面 的 9.6 节 。 


v 提示 

口 这 个 脚本 假设 第 一 个 cookie 包含 用 户 名 。 后 面 的 脚本 将 演示 如 何 处 理 多 个 cookie, 并 且 根 据 名 

称 ( 而 不 是 编号 ) 来 获得 cookie。 

O 如 果 你 正 处 在 下 半年 , 无 需 担 心 遭 遇 日 期 重 置 问题 。 为 月 份 加 6 总 是 会 生成 正确 的 结果 , 也 就 

是 说 ， 下 半年 的 情况 下 ， 年 份 加 1 的 同时 ， 月 份 会 减 6。 

口 本 章 中 的 脚本 具有 特定 的 次 序 , 如 果 你 按照 它们 在 书 中 出 现 的 次 序 运 行 它们 , 那么 它们 会 正常 
和 运行。 但是， 如 果 打 乱 次 序 ， 就 可 能 遇 到 某 些 怪异 的 结果 (比如 ,浏览 器 认为 你 的 姓名 是 一 个 
数字 )。 如 果 硕 望 不 按 次 序 运行 它们 ， 就 应 该 在 脚本 的 各 次 执行 之 间 运 行 脚本 9-7。 


9.2 ” 读 取 cookie 
设置 了 cookie 之 后 , 需要 获得 它 以 便 做 某 些 有 意义 的 事情 。 前 一 个 示例 在 cookie 中 设置 了 文本 字 


FEE Tom。 脚 本 9-3 和 脚本 9-4 演示 如 何 从 cookie 中 获得 这 个 值 并 日 将 它 显示 在 屏幕 上 ( 当然 ,一 般 
情况 下 不 需要 显示 cookie， 这 个 脚本 显示 cookie 只 是 为 了 演示 )。 































































































脚本 9-3 JavaScript 将 使 用 这 个 HTML 页 面 中 的 id 来 搬入 cookie 结 


<!DOCTYPE html» 
<html> 
<head> 
<title>I know your name!</title> 
<script src="script02.js"></script> 
</head> 
<body> 
«hi id="nameField">&nbsp;</h1> 
</body> 
</html> 


脚本 9-4 这 个 简短 的 脚本 读 取 前 面 设置 的 cookie 并 且 将 它 发 送 到 文档 窗口 


window.addEventListener("load",nameFieldInit, false); 
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function nameFieldInit() ( 
if (document.cookie !- "") ( 


document.getElementById("nameField").innerHTML = "Hello, " + document.cookie.split("=")[1]; 


} 


= 读 取 cookie 








1. if (document.cookie !- "") { 


确保 document . cookie 对 象 中 的 值 非 空 。 


2. document.getElementById("nameField").innerHTML = "Hello, " + document.cookie.split("=")[1]; 
如 果 cookie 非 空 ， 就 向 屏幕 上 写 一 个 文本 字符 串 : "Hello," 注意 逗号 后 面 有 空格 )， 再 加 上 提 








取出 的 cookie {H ( 见 图 9-2 )。 





Hello, Tom 











图 9-2 这 个 cookie 提供 了 我 的 姓名 


v 提示 


能 访问 自己 的 cookie。 


9.3 显示 cookie 

















在 前 一 个 示例 中 , 我 们 读 取 了 一 个 来 自 服务 器 的 cookie 的 值 。 现在 , 我 们 看 看 如 何 编写 一 个 脚本 , 
让 它 读 取 来 自 你 的 服务 器 的 所 有 cookie ,并 且 显 示 它 们 的 名 称 和 值 . 如 果 没 有 cookie ,脚本 就 显示 There 
are no cookies here ( 见 图 9-3 )。 如 果 有 cookie， 就 将 每 个 cookie 的 内 容 显 示 在 单独 的 行 上 ( 见 图 9-4 )。 


脚本 9-5 演示 具体 做 法 。 





EE 


Ihere are no cookies here 





图 9-3 ”如 果 来 自 网 页 所 在 的 服务 器 没有 cookie, 





就 会 看 到 这 个 结果 


























[EI 


Cookie name is 'userName', and the value is 'Tom' 








9-4 ”如 果 有 一 个 或 多 个 cookie, 那么 脚本 将 它们 写 
到 文档 窗口 
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脚本 9-5 ”这 个 脚本 循环 遍历 并 且 显 示 某 个 特定 服务 器 在 你 的 机 器 上 设置 的 所 有 cookie 
window.addEventListener("load",showCookies, false); 


function showCookies() { 


var outMsg - ""; 


if (document.cookie -- "") ( 
outMsg - "There are no cookies here"; 
} 


else { 
var thisCookie = document.cookie.split("; "); 


for (var i=0; i<thisCookie.length;it+) { 
outMsg += "Cookie name is '" + thisCookie[i].split("-")[0]; 
outMsg += "', and the value is '" + thisCookie[i].split("=") [1] + "'«br»"; 
j 
} 
document. getElementById("cookieData").innerHTML = outMsg; 
} 


> Sf af BAY cookie 








1. var outMsg = 
首先 对 变量 outMsg 进行 初始 化 ， 这 个 变量 将 包含 我 们 要 显示 的 消息 。 
2.if (document.cookie == "") { 


uu, 
3 





outMsg = "There are no cookies here"; 

这 个 条 件 测试 的 意思 是 :如 果 document.cookie 是 空 的 ,那么 将 outMsg 设置 为 There are no cookies heres 

3. var thisCookie = document.cookie.split("; "); 

如 果 前 面 的 测试 失败 〈 即 至 少 有 一 个 cookie 存在 )， 那 么 使 用 document .cookie.split("; ")3AfS 
所 有 cookie 的 值 ， 并且 将 这 些 值 存储 进 数 组 thisCookie。 请 记 住 ，split("; ") 命 令 创建 一 个 包含 所 有 
cookie 的 数组 。 然 后 ， 脚 本 就 能 够 引用 这 个 数组 中 的 每 个 值 。 

4. for (var i=0; i<thisCookie.length;i++) { 

这 一 行 开 始 一 个 循环 ， 首 先 将 计数 器 变量 i 的 值 设 置 为 零 。 然 后 ,设置 循环 条 件 为 “i 小 于 
thisCookie 数组 中 的 cookie 数量 ”"。 最 后 将 i 的 值 递增 1。 

5. outMsg += "Cookie name is '" + thisCookie[i].split("=")[0]); 

outMsg += "', and the value is '" + thisCookie[i].split("-")[1] + "'«br»"); 

在 脚本 遍历 数组 时 , 对 于 每 个 cookie, 它 将 文本 字符 串 "Cookie name is '" A outMsg, JAER cookie 
的 名 称 。 然 后 加 上 文本 字符 串 "'，and the value is '" 和 cookie 的 值 。 最 后 ， 在 每 行 的 末尾 加 上 一 个 
HTML 分 隔 符 。 

6. document.getElementById.("cookieData").innerHTML = outMsg; 

在 遍历 所 有 cookie 之 后 ， 变 量 outMsg 已 经 设置 好 了 ， 所 以 通过 innerHTML 将 它 写 到 页 面 上 。 


9.4 使 用 cookie 作为 计数 器 


因为 cookie 是 持久 性 的 ， 也 就 是 说 ， 它 们 可 以 跨 Web 服务 器 和 浏览 需 之 间 的 多 次 会 话 持久 地 存 
在 ,所 以 可 以 使 用 cookie 存储 特定 用 户 访问 某 个 页 面 的 次 数 。 但 是 , 这 并 不 是 在 许多 网 页 上 看 到 的 页 
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面 计数 需 。 因 为 cookie 是 与 一 个 用 户 相关 联 的 ,所 以 只 能 记录 这 个 用 户 的 访问 次 数 ,不 能 使 用 cookie 
存储 所 有 用 户 访问 这 个 页 面 的 次 数 。 但 是 ， 了 解 如 何 创建 这 样 的 个 人 计数 器 是 有 意义 的 ， 还 可 以 修改 
脚本 9-6 来 完成 其 他 任务 〈 参 见 提示 )。 

脚本 9-6 这 个 脚本 在 cookie 中 记录 访问 次 数 


window. addEventListener("load", initPage, false); 











function initPage() { 
var expireDate = new Date(); 
expireDate.setMonth(expireDate. getMonth()+6) ; 


var hitCt = parseInt(cookieVal("pageHit")); 
hitCt++; 


document.cookie = "pageHit=" + hitCt + ";expires=" + expireDate. toGMTString(); 
document.getElementById("pageHits").innerHTML = "You have visited this page " + hitCt + " times."; 
} 


function cookieVal(cookieName) { 
var thisCookie = document.cookie.split("; "); 


for (var i=0; i«thisCookie.length; i++) { 
if (cookieName == thisCookie[i].split("-")[0]) { 
return thisCookie[i].split("-")[1]; 
} 


} 


return 0; 


} 
=> 使 用 cookie 作为 计数 器 


1. var expireDate = new Date(); 

expireDate.setMonth(expireDate. getMonth()+6) ; 

这 两 行 与 9.1 节 中 的 步骤 7 AER 8 相同 。 请 参见 那里 的 解释 。 

2. vax hitCt = parseInt(cookieVal("pageHit")); 

CETT" pageHit 是 这 个 cookie 的 名 称 。 在 后 面 的 步骤 中 ， 你 会 看 到 cookieVal() MANA. XX 
一 行 从 cookieVal() 获 得 cookie WAF, JHH parseInt() 方 法 将 它 转 换 为 数字 ， 然 后 将 结果 存储 进 
变量 hitCt。parseInt() 方 法 将 一 个 字符 串 〈cookie 中 的 值 ) 转换 为 数字 C 用 作 计 数 右 的 值 )。 

3. hitCt++; 

现在 将 hitct 的 值 加 1， 从 而 递增 计数 器 。 

4. document.cookie = "pageHit=" + hitCt + ";expires-" + expireDate.toGMTString(); 

这 行 代码 将 更 新 后 的 信息 写 回 cookie。 写 和 人 的 内 容 是 一 个 文本 字符 串 ， 其 中 包括 字符 串 
"pageHit="、 递 增 后 的 hitCt 值 、";expires=" 和 过 期 日 期 (这 个 日 期 在 步骤 1 中 设置 为 当前 日 期 后 的 
6 个 月 )。 

5. document.getElementById("pageHits").innerHTML = "You have visited this page "+ hitCt + "times."; 

这 一 行 在 文档 窗口 中 显示 用 户 消息 ( 见 图 9-5 ) 在 "page" 后 面 和 "times" 前 面 有 额外 的 空格 ， 这 会 
使 消息 在 屏幕 上 看 起 来 意义 更 明确 。 
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Fre j >| m 
How many times have you been here be... | + 


¢ . dropboxuserco 8 P? + A D- 


You have visited this page 4 times. 








J 


图 9-5 页 面 指出 我 们 已 经 访问 了 它 4 次 ， 真 是 难以 置信 








6. function cookieVal(cookieName) { 

这 一 行 创 建新 函数 cookieVal()。 需 要 向 它 传递 一 些 数据 ， 在 函数 中 可 以 用 变量 cookieName 引用 
7. var thisCookie = document.cookie.split("; "); 

将 变量 thisCookie 设置 为 split("; ") 方 法 生成 的 数组 。 

8. for (var i=0; i<thisCookie.length;i++) { 

现在 开始 一 个 循环 ， 这 与 9.3 节 中 的 步骤 4 相同。 

9. if (cookieName == thisCookie[i].split("-")[0]) { 

这 个 条 件 语句 检查 cookieName 是 否 与 cookie 数组 中 的 第 i 个 元 素 的 名 称 相同 。 

10. return thisCookie[i].split("=")[1]; 

如 果 步 又 9 中 的 测试 成 功 了 ， 那 么 返回 cookie 的 值 。 


11. return 0; 












































如 果 检 查 了 数组 中 的 所 有 元 素 , 但 是 没有 找到 匹配 ， 就 返回 0 值 。 

v 提示 

O 当 对 调用 这 个 脚本 的 HTML 页 面 进行 加 载 时 ， 在 浏览 器 中 单 击 Reload 按钮 就 会 看 到 计数 器 
递增 。 

口 如 前 所 述 , 可 以 修改 脚本 9-6 来 完成 其 他 任务 。 一 种 可 能 性 是 使 用 cookie 记录 特定 用 户 上 一 次 








访问 你 站 点 的 时 间 , 并 且 根 据 这 个 时 间 显示 不 同 的 页 面 。 例 如, 有 些 在 线 杂 志 有 一 个 封面 页 面 ， 

其 中 显示 插图 和 当天 的 新 闻 标 题 。 如 果 用 户 在 24 小 时 内 多 次 访问 这 个 站 点 ， 那 么 他 们 只 会 在 

第 一 次 看 到 封面 页 面 ， 后 续 的 访问 会 将 用 户 直接 转 到 站 点 的 目录 页 面 。 

O 如 果 你 需要 真正 的 页 面 访问 计数 器 , 即 显 示 所 有 用 户 加 载 某 个 页 面 的 总 次 数 的 计数 器 , 那么 需 
要 在 Web 服务 絮 上 安装 一 个 计数 器 程序 。 可 以 向 你 的 Web 主机 托管 公司 询问 他 们 是 否 提供 计 
数 器 功能 ， 也 可 以 在 搜索 引擎 中 搜索 “Web page hit counter"; 


9.5 删除 cookie 


有 了 时候， 你 希望 删除 cookie 记录 中 的 一 个 或 多 个 cookie。 这 非常 容易 ， 一 种 效果 很 好 的 技术 是 ， 
将 cookie 的 过 期 日 期 设置 为 过 去 的 某 个 日 期 ， 这 会 让 浏览 器 自动 地 删除 它 。 脚 本 9-7 演示 如 何 迫 使 
cookie 马上 过 期 。 
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脚本 9-7 这 个 脚本 删除 cookie 


window. addEventListener("load", cookieDelete, false); 


function cookieDelete() { 
var cookieCt = 0; 


if (document.cookie != "" && confirm ("Do you want to delete the cookies?")) { 
var thisCookie = document.cookie.split("; "); 
cookieCt = thisCookie. length; 


var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()-1); 


for (var i-0; i«cookieCt; i++) { 
var cookieName - thisCookie[i].split("-")[0]; 
document.cookie = cookieName + "=;expires=" + expireDate.toGMTString(); 
} 
} 


document. getElementById("cookieData").innerHTML = "Number of cookies deleted: " + cookieCt; 


} 


=> 删除 cookie 


l. var cookieCt = 0; 

这 个 脚本 要 记录 我 们 已 经 删除 了 多 少 个 cookie， 所 以 首先 创建 cookiect 变量 并 且 将 它 设置 为 零 。 

2. if (document.cookie != "" 8& confirm("Do you want to delete the cookies?")) { 

这 个 测试 首先 确保 cookie 不 包含 空 值 , 也 就 是 说 , 存在 一 些 cookie。 如 果 测 试 表 明 cookie 是 空 的 ， 
那么 脚本 就 不 进行 任何 操作 。 测 试 的 第 二 部 分 让 浏览 器 弹出 一 个 确认 对 话 框 ,其 中 显示 函数 调用 中 的 
文本 ( 见 图 9-6 )。 如 果 confirm() 返 回 true, 我 们 就 知道 用 户 希 望 删除 他 们 的 cookie, 如 果 返 回 false, 
就 跳 到 步骤 9。 





















































出 




















Message from webpage — 


eo Do you want to delete the cookies? 





OK Cancel 

















图 9-6 每 当 你 要 删除 任何 东西 时 ， 都 要 让 用 户 确认 ， 这 是 一 种 良好 的 界面 设计 习惯 














3. var thisCookie = document.cookie.split("; "); 

这 一 行 用 split("; ") 方 法 将 cookie 的 内 容 分 隔 成 数组 ， 并 且 将 这 个 数组 赋值 给 变量 thisCookie. 
4. cookieCt = thisCookie.length; 

我 们 现在 知道 将 要 删除 多 少 个 cookie， 所 以 将 这 个 值 存储 在 cookieCt 中 。 


5. var expireDate = new Date(); 








expireDate.setDate(expireDate.getDate()-1); 
这 里 创建 一 个 新 的 日 期 对 象 expireDate, 然后 将 它 设置 为 当前 日 期 减 1 一 一 换 句 话说 , 就 是 昨天 。 
6. for (var i=0; i«cookieCt; i++) { 
现在 开始 一 个 for 循环 ， 这 样 就 可 以 删除 所 有 cookie， 而 不 只 是 一 个 。 首 先 将 i 的 值 设置 为 零 ， 
只 要 i 小 于 cookie 的 数量 ， 就 将 i 递增 1。 
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7. var cookieName = thisCookie[i].split("-")[0]; 

使 用 split("=")[0] 获 得 数组 中 第 i 个 cookie 的 名 称 ， 然 后 将 它 存储 在 变量 cookieName 中 。 

8. document.cookie = cookieName + "=;expires=" + expireDate.toGMTString(); 

这 里 将 修改 后 的 过 期 日 期 写 回 cookie 中 。 

9. document.getElementById("cookieData").innerHTML = "Number of cookies deleted: "+ cookieCt; 
脚本 现在 已 经 离开 了 for 循环 ， 这 一 行将 已 经 删除 的 cookie 数量 写 到 HTML 文档 中 ( 见 图 9-7 )。 


eo ) https://di.dropbox. D ~ @ C | E Delete those cookies 


Number of cookies deleted: 1 








> 




















TES 











图 9-7 用 户 也 应 该 获得 已 经 发 生 的 事件 的 反馈 


9.6 ”处 理 多 个 cookie 


常常 希望 同时 处 理 多 个 cookie, HIZ 9-8 演示 如 何 读 取 多 个 cookie Jf- H. 
例 重用 了 9.4 节 中 的 大 量 代 码 。 


脚本 9-8 在 一 个 脚本 中 使 用 数组 处 理 多 个 cookie 


window. addEventListener("load", initPage, false); 














E 











示 其 中 的 信息 。 这 个 示 

















function initPage() { 
var now = new Date(); 
var expireDate = new Date(); 
expireDate.setMonth(expireDate.getMonth()46); 


var hitCt = parseInt(cookieVal("pageHit")); 
hitCt++; 


var lastVisit = cookieVal("pageVisit"); 
if (lastVisit == 0) { 
lastVisit = ""; 


} 


document.cookie = "pageHit=" + hitCt + ";expires= 
document.cookie = "pageVisit-" + now + ";expires- 


+ expireDate.toGMTString(); 
+ expireDate.toGMTString(); 


var outMsg = "You have visited this page " + hitCt 4 " times."; 
if (lastVisit !- "") { 
outMsg += "<br>Your last visit was 


} 


+ lastVisit; 


9.6 处 理 多 个 cookie 





document.getElementById("cookieData").innerHTML = outMsg; 
} 


function cookieVal(cookieName) { 
var thisCookie = document.cookie.split("; "); 
for (var i=0; i«thisCookie.length; i++) { 
if (cookieName == thisCookie[i].split(" 


=")[0]) { 
return thisCookie[i].split("=")[ 
} 


} 


return 0; 


} 
> 处 理 多 个 cookie 
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1. var lastVisit = cookieVal("pageVisit"); 
首先 将 字符 串 pageVisit 传递 给 cookieval() 函 数 ， 从 而 寻找 名 为 pageVisit 的 cookie. 
个 值 ， 然 后 将 这 个 值 存储 在 lastVisit 中 
2. if (lastVisit == 0) { 
lastVisit = ""; 
} 


如 果 lastVisit 的 值 是 零 就 将 空 值 放 进 1astVisit ,我 们 现在 知道 
3. document.cookie = 


= "pageHit=" + hitCt + 


document.cookie = "pageVisit=" + now + " 








";expires=" + expireDate.toGMTString(); 


;expires-" + expireDate.toGMTString(); 
这 两 行将 两 个 cookie 写 回 硬盘 ， 其 中 的 信息 包括 更 新 后 的 单 击 次 数 和 访问 时 间 。 
4. var outMsg = "You have visited this page " + hitCt + " times 

if (lastVisit !- "") { 


outMsg += "«br»Your last visit was " + lastVisit; 
} 

















outMsg 变量 存储 要 向 站 点 访问 者 显示 的 消息 。 其 中 的 第 一 
查 用 户 以 前 是 否 访 问 过 这 个 页 面 (也 就 是 ，lastVisit 是 否 非 空 
的 时 间 。 




















5. document .getElementById("cookieData").innerHTML 


= outMsg; 
最 后 , 将 outMsg 显示 在 屏幕 上 ， 


告诉 用 户 以 前 他 访问 这 个 页 面 的 情况 。i 




















aaa) Ss) 
Handing more than one cootie + 
¢ E 





phonnercontet B P & ft D- 
You have visited this page 6 times. 

Your last visit was Tue Feb 11 2014 17:41:02 
GMT-0800 (Pacific Standard Time) 











图 9-8 ”两 个 cookie 中 的 信息 (以 及 其 他 一 些 文本 ) 被 写 到 屏幕 上 


这 个 用 户 以 前 没有 访问 过 这 里 。 


它 返 回 一 


部 分 显示 用 户 的 访问 次 数 。 后 面 几 行 检 
)， 如 果 访 问 过 ， 就 显示 他 上 一 次 访问 


这 个 脚本 的 结果 见 图 9-8。 
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9.7 ”显示 新 内 容 提醒 信息 


可 以 使 用 cookie 和 JavaScript 提醒 经 常 访问 站 点 的 用 
站 点 的 用 户 提供 更 个 性 化 的 体验 ,证 站 点 显得 更 智能 
者 上 次 访问 之 后 添加 的 ， none. 9-9、 脚 本 9-10 和 脚本 9-11 就 在 这 
F 多 代码 与 本 章 








EHR (ILEI 9-9 )。 同 样 ， 





里 的 许 





户 注 意 他 们 没 看 到 过 的 内 容 。 这 会 向 访问 你 
、 友 好 。 de cookie 发 现 一 些 内 容 是 在 访问 
些 行 的 前 面 添加 一 个 小 的 New! 
前 面 的 示例 相似 。 





eoo 
[alr 


p | [f] EN © dl.dropboxusercontent.com 





Negrino and Smith's most recent books: 


new: JavaScript: Visual QuickStart Guide, 9? Edition 


Dreamweaver CC: Visual QuickStart Guide 
























































图 9-9 JavaScript 在 cookie 中 查询 用 户 上 一 次 访问 的 时 间 ， 并 且 标 出 新 内 容 
脚本 9-9 这 个 页 面 的 HTML 将 下 一 个 脚本 的 结果 应 用 于 页 面 
<!DOCTYPE html» 
<html> 
<head> 


<title>New for You</title> 


<link rel="stylesheet" href="script07.css"> 


<script src="script07.js"></script> 
</head> 
<body> 


<p>Negrino and Smith's most recent books:</p> 
<p id-"New-20140601"»«a href="http://www. javascriptworld.com">JavaScript:Visual QuickStart Guide, 


9<sup>th </sup> Edition</a></p> 


«p id-"New-20130812"»«a href="http: //www.dreamweaverbook.com">Dreamweaver CC: Visual QuickStart 


Guide</a></p> 
</body> 
</html> 


脚本 9-10 CSS 5j JavaScript 和 HTML 相 结合 ， 


body { 
background-color: #FFF; 
} 


p.newImg { 
padding-left: 35px; 
background-image: url(images/new. gif) ; 
background-repeat: no-repeat; 


脚本 9-11 这 个 脚本 可 以 提醒 用 户 注意 新 内 容 ， 


window.addEventListener("load",initPage, false); 





function initPage() { 
var now - new Date(); 
var lastVisit - 


var expireDate - new Date(); 


可 以 产生 个 性 化 的 内 容 


从 而 使 站 点 更 加 个 性 化 





new Date(cookieVal("pageVisit")); 
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expireDate.setMonth(expireDate.getMonth()+6); 


document.cookie = "pageVisit=" + now + ";expires-" + expireDate.toGMTString(); 
var allGrafs = document.getElementsByTagName("p"); 


for (var i=0; i«allGrafs.length; i++) { 
if (allGrafs[i].id.indexOf("New-") !- -1) { 
newCheck(allGrafs[i],allGrafs[i].id.substring(4)); 
j 
} 


function newCheck(grafElement,dtString) { 
var yyyy = parseInt(dtString.substring(0,4),10); 
var mm = parseInt(dtString.substring(4,6),10); 
var dd = parseInt(dtString.substring(6,8),10); 
var lastChgd = new Date(yyyy,mm -1,dd); 


if (lastChgd.getTime() > lastVisit.getTime()) { 
grafElement.className += " newImg"; 
} 
} 
} 


function cookieVal(cookieName) { 
var thisCookie = document.cookie.split("; "); 


for (var i=0; i«thisCookie.length; i++) { 
if (cookieName == thisCookie[i].split("-")[0]) { 
return thisCookie[i].split("-")[1]; 
) 
} 


return "1 January 1970"; 





} 


> 显示 新 内 容 提醒 信息 


1. «p id="New-20140601"><a href-"http://www. javascriptworld.com">JavaScript: Visual QuickStart 








"Guide, 9<sup>th</sup> Edition</a></p> 
<p id-"New-20130812"»«a href="http://www.dreamweaverbook.com">Dreamweaver CC: Visual 
‘QuickStart Guide</a></p> 
在 脚本 9-9 中 ， 这 两 个 段落 上 的 id 属性 将 所 包含 日 期 告诉 JavaScript ( 稍 后 我 们 将 会 看 到 )， 
JavaScript 将 这 些 日 期 与 后 面 步 又 中 建立 的 信息 进行 比较 。 
2. p.newImg { 
padding-left: 35px; 























background-image: url(images/new.gif); 
background-repeat: no-repeat; 
) 
在 脚本 9-10 中 ,对 于 页 面 上 具有 newImg 类 的 段落 (在 <p> 标 签 中 ), 我 们 使 用 CSS 在 左边 添加 35 
像素 的 内 边 距 T 并 且 将 New! 图 像 放 在 背景 中 。 但 是 ， 因 为 内 边 距 确保 段落 内 容 的 前 面 是 空 
的 ， 所 以 这 个 图 像 看 起 来 不 像 是 背景 图 像 ， 而 是 段落 内 容 前 面 的 一 个 标志 。 
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3. var lastVisit = new Date(cookieVal("pageVisit")); 
var expireDate = new Date(); 
expireDate.setMonth(expireDate.getMonth()+6) ; 
在 脚本 9-11 中 ， 这 些 代 码 对 lastVisit 和 expireDate 日 期 进行 初始 化 。 第 一 个 是 cookie 中 保存 
的 访问 者 上 一 次 访问 站 点 的 日 期 ， 第 二 个 是 重 写 cookie 时 将 使 用 的 过 期 日 期 。 





4. document.cookie = "pageVisit=" + now + ";expires=" + expireDate.toGMTString(); 

这 一 行 写 cookie， 它 将 当前 日 期 写 到 pageVisit 中 ,将 expireDate 的 值 写 到 expires 中 。 

5. var allGrafs = document.getElementsByTagName("p") ; 

这 一 行 创建 一 个 包含 页 面 上 所 有 <p> 元 素 的 数组 ， 这 样 就 可 以 遍历 它们 , 逐一 寻找 我 们 要 处 理 的 元 素 。 

6. for (var i=0; i«allGrafs.length; i++) { 

这 里 ， 开 始 一 个 对 数组 进行 遍历 的 循环 ， 依 次 检查 每 个 段落 元 素 。 

7. if (allGrafs[i].id.indexOf("New-")!- -1) { 

如 果 这 个 段落 具有 一 个 包含 文本 New- 的 id 属性 ， 我 们 就 知道 这 是 要 关注 的 段落 ， 所 以 要 执行 后 
面 的 操作 。 

8. newCheck(allGrafs[i],allGrafs[i].id.substring(4)); 

我 们 要 检查 这 个 段落 是 否 是 这 个 访问 者 没 看 过 的 。newCheck() 函数 执行 这 个 检查 ， 传 递 给 它 的 参 
数 有 两 个 : 当前 的 段落 元 素 (allGrafs[i] ) 和 id 属性 的 第 二 部 分 。substring() 从 字符 串 中 提取 出 第 
五 个 字符 到 末尾 的 子 字符 串 。 因 为 这 是 我 们 此 处 唯一 关注 的 , 所 以 只 需要 传递 它 。( 请 记 住 , JavaScript 
字符 串 中 的 字符 是 从 零 开 始 编号 的 ， 所 以 字符 串 中 的 第 五 个 字符 在 位 置 4 上。 ) 

9. function newCheck(grafElement, dtString) { 

这 个 函数 需要 传递 进 两 个 参数 , 这 两 个 参数 在 函数 内 部 称 为 grafElement ( 段落 元 素 ) 和 dtString 
(id 属性 的 第 二 部 分 )。 

10. var yyyy = parseInt(dtString.substring(0,4),10); 


var mm = parseInt(dtString.substring(4,6),10); 
var dd = parseInt(dtString.substring(6,8),10); 


这 三 行 代码 从 字符 串 中 解析 出 日 期 。 例 如 ,，“20140601” 就 是 2014 年 6 月 1 日 。 

yyyy 变量 存储 前 4 位 ( 从 第 0 位 开始 ， 到 第 4 位 前 面 结束 ), 结果 是 “2014”。mm 变量 存储 第 4 位 
和 第 5 位 , dd 变量 存储 第 6 位 和 第 7 位 。 在 每 种 情况 中 都 对 结果 应 用 parseInt(), 从 而 将 substring() 
返回 的 值 转换 为 整数 。 

11. var lastChgd = new Date(yyyy,mm-1, dd); 

因为 已 经 获得 了 年 、 月 和 日 ， 所 以 可 以 设置 lastChgd。 但 是 ， 等 一 下 ! JavaScript 的 日 期 格式 比 
较 古怪 ， 必 须 将 月 份 减 1 才能 得 到 正确 的 结果 一 一 请 记 住 ， 只 将 月 份 减 1， 对 于 年 和 日 不 要 这 么 做 。 
实际 上 ， 月 份 是 基于 零 的 ， 而 年 和 日 是 基于 1 的 。( 关于 日 期 及 其 古怪 的 更 多 信息 ， 请 参考 第 11 章 。) 

12. if (lastChgd.getTime() > lastVisit.getTime()) { 

现在 ， 可 以 对 两 个 日 期 进行 比较 。 只 有 在 最 后 修改 页 面 信息 的 日 期 晚 于 访问 者 上 次 访问 的 日 期 的 
情况 下 ， 才 执行 以 下 操作 。 

13. grafElement.className += " newImg"; 

这 里 是 核心 部 分 : 我 们 知道 这 个 段落 应 该 显示 New! 图 像 。 所 以 在 这 个 <p> 标 签 中 添加 一 个 class 
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属性 newImg, HTML 页 面 中 声明 的 样式 就 会 自动 应 用 于 这 个 段落 ， 因 此 会 显示 图 像 。 

也 就 是 说 ， 我 们 可 以 使 用 JavaScript 在 元 素 中 添加 属性 及 其 相关 联 的 值 。 在 这 个 示例 中 ， 元 素 是 
<p>， 属 性 是 class， 属 性 值 是 newImg。 因 为 元 素 可 能 已 经 有 了 class 属性 ， 这 行 代码 会 添加 属性 值 ， 
而 不 是 覆盖 当前 的 值 。 

添加 了 这 个 新 属性 之 后 ， 会 立即 触发 浏览 需 的 呈现 引擎 ， 自 动 地 将 样式 应 用 于 这 个 元 素 ， 从 而 使 
图 像 出 现 。 


14. function cookieVal(cookieName) { 
var thisCookie = document.cookie.split("; "); 






































for (var i=0; i«thisCookie.length; i++) { 
if (cookieName == thisCookie[i].split("-")[0]) { 
return thisCookie[i].split("-")[1]; 
} 


return "1 January 1970"; 


eer cookieVal() 消 数 。 这 里 的 唯一 差异 是 ， 如 果 没 有 找到 名 字 指 定 的 cookie, TZ 
会 返回 “1 January 1970”， 而 不 是 零 。 这 会 简化 其 他 地 方 的 代码 。 这 是 JavaScript 能 够 识别 的 最 早 的 日 期 ， 
所 以 其 他 日 期 都 应 该 晚 于 这 个 日 期 。 这 个 日 期 并 不 向 用 户 显示 ， 它 只 是 JavaScript 内 部 引用 的 日 期 。 
v 提示 
O 你 可 能 更 熟悉 只 向 parseInt() 传 递 一 个 参数 的 调用 方式 。 但 是 , 这 里 传递 了 两 个 参数 : 要 转换 9 
的 字符 串 和 10。 最 后 一 个 参数 让 parseInt() 总 是 返回 十 进 制 的 数字 。 如 果 不 这 么 做 ， 那 么 在 
把 以 0 开头 的 字符 串 传 递 给 parseInt() 时 , 它 可 能 把 结果 转换 为 八进制 , 这 会 产生 错误 的 结果 。 
在 这 种 情况 下 ， 调 用 parseInt("09") 和 parseInt("09",10) 会 返回 不 同 的 结果 ， 而 后 者 才 是 我 
们 需要 的 。 这 只 是 你 需要 了 解 的 JavaScript 的 怪 脾 气 之 一 。 
O substring(to,from) 命 令 返 回 一 个 字符 串 中 从 to 位 置 开 始 ， 到 from 位 置 前 面 结束 的 字符 F 
符 从 零 开始 编号 )。 所以， 如 果 字 符 串 包含 “20140807”， 而 你 希望 获得 第 5 个 和 第 6 个 字符 ， 
就 要 使 用 substring(4,6)， 结 果 是 字符 串 “08”。 
from 参数 是 可 选 的 。 如 果 省 略 它 ， 就 表示 要 获得 从 to 位置 开始 到 末尾 的 所 有 字符 。 


























































































































对 象 和 DOM 








3C 建议 符合 标准 的 浏览 器 采用 节点 操纵 (node manipulation ) 的 方式 支持 网 页 ,使 页 面 表现 得 
更 像 应 用 程序 ， 而 不 是 一 般 的 标准 静态 页 面 。 例 如 , 可 以 让 页 面 在 不 与 服务 器 进行 通信 的 情况 
下 ,根据 用 户 输 入 的 内 容 发 生 改 变 ， 以 及 在 脚本 的 控制 下 更 新 页 面 。 尽管 可 以 像 本 书 中 其 他 地 方 所 做 
的 那样 ， 使 用 innerHTML 这 样 的 技术 ,但 是 在 本 章 中 我 们 将 讲解 官方 支持 的 方式 。 节 点 操纵 也 可 以 在 
服务 咒 端 实现 ， 但 是 如 果 要 提供 这 个 功能 ， 同 时 又 不 必 迫 使 用 户 在 页 面 之 间 不 断 移 动 , 那么 只 能 使 用 


















































JavaScript. 
在 本 章 中 ， 你 将 学 习 一 些 关 于 节点 和 DOM 的 知识 ， 添加、 删除 和 操作 特定 的 节点 ， 以 及 在 页 面 
上 插入 和 符 换 节 点 。 





10.1 关于 节点 操纵 
本 章 是 本 书 中 探索 JavaScript 和 DOM 最 深入 的 一 章 ， 所 以 我 们 首先 需要 讨论 一 下 历史 和 术语 。 
10.1.1 DOM 2 和 W3C 


W3C ( 见 第 1 章 中 的 介绍 ) 发 布 了 规范 来 规定 浏览 器 应 该 如 何 处 理 文档 对 象 模 型 (Document 
Object Model, DOM )。DOM Level 2 规范 于 2000 年 11 月 成 为 正式 推荐 标准 ， 它 更 深入 地 规定 了 浏 
览 需 应 该 如 何 引 用 和 管理 页 面 上 的 内 容 。 可 以 在 http:/www.w3.org/TR/DOM-Level-2-Core/ 上 找到 这 
个 规范 的 更 多 细节 。 

尽管 这 个 规范 已 经 发 布 好 几 年 了 , 但 是 当前 使 用 的 许多 浏览 器 仍然 只 具有 不 完整 的 DOM 2 支持 。 
在 使 用 本 章 中 的 脚本 之 前 ， 要 确保 目标 受众 能 够 运行 它们 ， 或 者 为 老式 浏览 器 提供 实现 同样 效果 的 替 
代 方 法 。 好 消息 是 ， 当 今 的 大 多 数 网 上 冲浪 者 都 使 用 IE 9+, Firefox, Chrome 或 Safari, ， 而 这 些 浏览 
器 都 能 够 很 好 地 运行 这 些 脚 本 。 







































































10.1.2 DOM 2 术语 


在 本 书 的 开头 ， 我 们 将 JavaScript 称 为 “组 合式 (snap-together) 语言 ”， 因 为 可 以 将 对 象 、 属 性 
和 方法 组 合 在 一 起 来 构建 出 JavaScript 应 用 程序 。 还 有 一 种 看 待 HTML 页 面 的 方式 : 将 它 看 作 由 节点 
(node ) 组 成 的 树 结构 。 例 如 ， 下 面 这 个 简单 的 HTML 页 面 : 
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<html> 
<head> 
<title>My page</title> 
</head> 
<body> 
<p>This is text on my page</p> 
</body> 
</html> 


可 以 看 作 图 10-1 所 示 的 结构 。 








"My Page" "This is text on 
my page" 


图 10-1 这 个 由 节点 组 成 的 树 结构 只 是 看 待 HTML 页 面 组 织 方 式 的 另 一 种 方法 


可 以 使 用 JavaScript 修改 这 个 树 结构 的 任何 方面 ， 包 括 添加 、 访 问 、 修 改 和 删除 树 中 的 节点 。 这 
个 树 中 的 每 个 框 都 是 一 个 节点 。 如 果 一 个 节点 包含 HTML 标签 ， 那么 它 就 称 为 元 素 节点 ( element 
node )。 否 则 ， 它 称 为 文本 节点 ( text node )。 当 然 ， 元 素 节 点 可 以 包含 文本 节点 。 





























10.1.3 DOM3 


DOM Level 3 F 2004 年 4 月 成 为 正式 推荐 标准 。 关 于 这 个 规范 的 信息 ， 可 以 在 www.w3.org/TR/ 
DOM-Level-3-Core/ 找 到 。 与 W3C 过 程 的 许多 部 分 一 样 ， 仍 然 要 再 过 很 长 时 间 在 浏览 需 中 才 会 出 现 真 
正 的 支持 。 所 以 本 章 只 讨论 DOM 2。 但是， 如 果 你 有 兴趣 了 解 更 多 情况 ， 那 么 可 以 从 ECMAScript 
binding 开始 ( www.w3.org/TR/DOM-Level-3-Core/ecma-script-binding.html )。 

















10.2 添加 市 点 


学 习 节 点 最 容易 的 方法 , 是 首先 在 文档 末尾 追加 一 个 元 素 节 点 ( 它 将 包含 一 个 文本 节点 ), 脚本 10-1 
和 脚本 10-2 让 用 户 输入 一 些 数据 并 且 单 击 一 个 按钮 ， 然 后 将 一 个 新 段落 添加 到 页 面 中 ( 见 图 10-2 )。 
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脚本 10-1 这 个 HTML 创建 一 个 文本 区 域 和 一 个 提交 按钮 ， 让 用 户 能 够 添加 文本 节点 


<!DOCTYPE html> 
<html> 
<head> 
<title>Adding Nodes</title> 
<script src="script01.js"></script> 
</head> 
<body> 
<form id="theForm"> 
<p><textarea id-"textArea" rows="5"cols="30"></textarea></p> 
<input type="submit" value="Add some text to the page"> 
</form> 
</body> 
</html> 


脚本 10-2 这 个 脚本 使 用 户 可 以 将 任何 文本 添加 到 页 面 上 
window. addEventListener("load", initAl1, false); 
function initAll() { 


document .getElementById("theForm") .addEventListener("submit" ,addNode, false); 
} 


function addNode(evt) { 
var inText = document.getElementById("textArea").value; 
var newText = document.createTextNode(inText) ; 


var newGraf = document.createElement("p"); 
newGraf.appendChild(newText); 


var docBody = document.getElementsByTagName("body") [0]; 
docBody . appendChild(newGraf); 


evt.preventDefault(); 
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图 10-2 在 字段 中 输入 文本 ， 然 后 单 击 按钮 ( 左 图 )， 就 可 以 添加 一 个 节点 。 这 些 文本 
会 出 现在 页 面 上 ( 右 图 ) 
1. var newText = document.createTextNode(inText) ; 


首先 ， 使 用 createTextNode() 方 法 创建 一 个 新 的 文本 节点 ( 名 为 newText )， 它 将 包含 在 textArea 
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中 找到 的 文本 。 
2. var newGraf = document.createElement("p"); 
接 下 来 ,使 用 createElement() 方 法 创建 一 个 新 的 元 素 节点 。 尽 管 这 里 创建 的 节点 是 一 个 段落 标签 ， 








但 它 也 可 以 是 任何 HTML 容器 (div, span 等 )。 这 个 新 元 素 的 名 称 是 newGraf。 
3. newGraf .appendChild(newText); 
为 了 将 新 文本 添加 到 新 段落 中 , 我们 必须 调用 appendChild(). XÆ newGraf 元 素 的 一 个 方法 , 将 
newText 传递 给 它 时 ， 就 会 将 文本 节点 放 进 段落 中 。 
4. var docBody = document.getElementsByTagName("body")[0]; 
为 了 将 新 节点 添加 到 文档 的 body 中 ， 需 要 查 明 body 的 位 置 。 这 个 getElementsByTagName() 7717; 
会 给 出 页 面 上 的 每 个 body 标签 。 如 果 页 面 符合 标准 , 那么 应 该 具有 一 个 body 标签 。[0] 属 性 是 第 一 个 
body 标签 ， 我 们 将 它 存储 在 docBody 中 。 
5. docBody . appendChild(newGraf); 
最 后 ， 将 newGraf 追加 到 docBody "P 同样 使 用 appendChild() )， 从 而 将 用 户 输入 的 新 文本 放 到 
页 面 上 。 
6. evt. preventDefault(); 
现在 使 用 事件 处 理 高 级 方法 (参见 第 8 章 )， 为 了 阻止 表单 提交 我 们 需要 采取 一 些 措施 。 不 过 ， 
只 是 返回 false 没 用 ， 我 们 通知 调用 事件 不 要 运行 任何 默认 事件 。 
V 提示 
O 既然 对 innerHTML 进行 简单 的 赋值 就 可 以 实现 同样 的 效果 ,那么 为 什么 要 这 么 费事 儿 ( 创建 文 
本 节点 、 创 建 元 素 节 点 并 且 追 加 子 节点 ) 呢 ? 有 一 个 原因 : 利用 这 种 方式 ， 就 不 可 能 导致 页 和 
无 效 。 例 如 ， 添 加 的 每 个 cpy 或 cdivy 标 签 会 自动 结束 。 另 一 方面 ， 如 果 使 用 innerHTML， 就 非 
常 容易 形成 无 效 的 标签 ( 简直 太 容 易 了 )。 一 旦 发 生 这 种 情况 ， 页 面 的 DOM 就 很 难处 理 了 。 
例如 ， 如 果 一 个 元 素 有 开始 标签 ， 而 没有 结束 标签 ， 那 么 就 无 法 读 取 这 个 元 素 的 内 容 。 
口 段落 本 身 不 能 再 包含 段落 。 如 果 你 试图 传人 多 个 用 空 行 分 隔 的 句子 , 这 段 代 码 将 把 它们 合并 成 
一 个 大 段 ， 而 不 是 分 别 解析 每 一 段 。 


10.3 ”删除 节点 


如 果 你 希望 在 页 面 上 添加 内 容 ， 那 么 也 可 能 希望 从 页 面 中 删除 内 容 。 脚 本 10-3 (HTML ) 和 脚本 
10-4 删除 页 面 上 的 最 后 一 个 段落 ， 如 图 10-3 所 示 。 


脚本 10-3 ”这 个 脚本 添加 一 个 用 来 删除 文本 节点 的 链接 〈 而 不 是 按钮 ) 


<!DOCTYPE html» 
<html> 
<head> 
<title>Deleting Nodes</title> 
<script src="script02.js"></script> 
</head> 
<body> 
<form id="theForm"> 
<p><textarea id-"textArea" rows="5" cols="30"></textarea></p> 
<input type="submit" value="Add some text to the page"> 
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</form> 

«a href="#"id="deleteNode" »Delete last paragraph</a> 
«/body» 
«/html» 


脚本 10-4 现在 ， 用 户 既 可 以 添加 文本 ， 也 可 以 删除 文本 


window. addEventListener("load", initAl1, false); 


function initAll() { 
document .getElementById("theForm") .addEventListener("submit" ,addNode, false); 
document .getElementById("deleteNode").addEventListener("click",delNode, false); 
} 


function addNode(evt) { 
var inText = document.getElementById("textArea").value; 
var newText = document.createTextNode(inText) ; 


var newGraf = document.createElement("p"); 
newGraf.appendChild(newText); 


var docBody = document.getElementsByTagName( "body") [0]; 
docBody.appendChild(newGraf) ; 


evt.preventDefault(); 
} 


function delNode(evt) { 
var allGrafs = document.getElementsByTagName("p"); 


if (allGrafs.length » 1) ( 
var lastGraf - allGrafs[allGrafs.length-1]; 
var docBody = document.getElementsByTagName("body") [0]; 
docBody . removeChild(lastGraf); 











else ( 
" ; ny. 
alert("Nothing to remove!"); 
evt.preventDefault(); 
cp | [ESI] 
Qo E https/ /didropboruser., O ~ @ C || © Deleting Nodes O B) https//didropbomuser.. D ~ @ C | E Deleting Nodes 
A ^ 
v v 
Add some text to the page Add some text to the page 
Delete last paragraph Delete last paragraph 
Last night, we were watching TV when I heard an odd sound from the kitchen I got up to Last night, we were watching TV when I heard an odd sound from the kitchen I got up to 
look, but didn't find anything Later, Dori discovered that it was the sound of a rubber look, but didn't find anything Later, Dori discovered that it was the sound of a rubber 
chicken hitting the floor chicken hitting the floor 
k any ot hat 
n ther d that 




















图 10-3 ”这 个 页 面 上 的 最 后 一 个 段落 需要 修改 〈( 左 图 )， 所 以 
可 以 使 用 Delete last paragraph 链接 删除 它 ( 右 图 ) 
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1. var allGrafs = document.getElementsByTagName("p") ; 

这 一 行使 用 getElementsByTagName 方法 收集 页 面 上 的 所 有 段落 标签 , 并 且 将 它们 存储 在 allGrafs 
数组 中 。 

2. if (allGrafs.length > 1) { 

在 进行 实际 的 删除 操作 之 前 ， 首 先 必须 检查 allcrafs 数组 的 长 度 是 否 大 于 1。 我 们 不 希望 尝试 删 
除 某 些 并 不 存在 的 东西 , 而 且 数组 的 长 度 总 是 至 少 为 1( 因为 脚本 10-3 中 的 textarea 表单 字段 放 在 一 
个 <p> 标 签 中 )。 

3. var lastGraf = allGrafs[allGrafs.length-1]; 

如 果 有 段落 ,那么 以 数组 长 度 减 1 作为 数组 索引 来 获得 最 后 一 个 段落 。 请 记 住 ,长 度 是 从 1 开始 
的 ， 而 数组 索引 是 从 0 开始 的 ， 所 以 数组 长 度 减 1 就 可 以 获得 页 面 上 的 最 后 一 个 段落 。 

4. var docBody = document.getElementsByTagName("body")[0]; 

docBody. removeChild(lastGraf) ; 

与 前 一 节 中 相似 ,为 了 修改 文档 ,需要 找到 body 的 内 容 。 在 此 之 后 ,只 需 调 用 docBody.removeChild() 
方法 并 且 将 lastGraf 传递 给 它 ， 这 告诉 JavaScript 我 们 希望 删除 哪个 段落 。 在 页 面 上 ， 会 立刻 显示 少 
了 一 个 段落 。 

v 提示 

口 同样 , 也 可 以 删除 段落 之 外 的 其 他 元 素 节 点 。 为 此 , 只 需 修 改 脚本 , 向 getElementsByTagName() 

传递 其 他 非 p 标签 名 称 。 
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尽管 总 是 删除 最 后 一 个 段落 可 能 是 有 意思 的 , 但 是 有 时 候 希 望 删除 不 在 页 面 末尾 的 段落 。 脚 本 10-5 
(HTML ) 和 脚本 10-6 使 我 们 的 代码 更 加 灵活 ， 让 用 户 能 够 选择 要 删除 的 段落 ， 见 图 10-4 和 图 10-5. 


脚本 10-5 ” 单 选 按钮 让 访问 者 选择 是 添加 文本 ， 还 是 删除 文本 


<!DOCTYPE html» 
<html> 
<head> 
<title>Deleting Selected Nodes</title> 
<script src="script03.js"></script> 
</head> 
<body> 
<form id="theForm"> 
<p><textarea id-"textArea" rows="5"cols="30"></textarea></p> 
<p> 
<label><input type="radio" name="nodeAction">Add node«/label» 
<label><input type="radio" name="nodeAction">Delete node</label> 
</p> 
Paragraph #: <select id="grafCount"></select> 
<input type="submit" value-"Submit"» 
</form> 
<div id="modifiable"> </div> 
</body> 
</html> 
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脚本 10-6 ”这 个 脚本 让 用户 能 够 选择 要 删除 的 段落 


window. addEventListener("load", initAl1, false); 
var nodeChgArea; 


function initAll() { 
document .getElementById("theForm").addEventListener("submit" ,nodeChanger, false); 


nodeChgArea = document.getElementById("modifiable"); 
} 


function addNode() { 
var inText = document.getElementById("textArea").value; 
var newText = document.createTextNode(inText) ; 


var newGraf = document.createElement("p"); 
newGraf.appendChild(newText); 


nodeChgArea. appendChild(newGraf); 
} 
function delNode() { 
var grafChoice = document.getElementById("grafCount").selectedIndex; 
var allGrafs = nodeChgArea.getElementsByTagName("p"); 
var oldGraf = allGrafs.item(grafChoice) ; 


nodeChgArea. removeChild(oldGraf) ; 
} 


function nodeChanger(evt) { 
var actionType = -1; 
var pGrafCt = nodeChgArea.getElementsByTagName("p") . length; 
var radioButtonSet = document.getElementById("theForm").nodeAction; 


for (var i=0; i«radioButtonSet.length; i++) ( 
if (radioButtonSet[i].checked) { 
actionType - i; 


} 


switch(actionType) { 
case 0: 
addNode() ; 
break; 
case 1: 
if (pGrafCt > 0) { 
delNode(); 
break; 


} 
default: 
alert("No valid action was chosen"); 


} 
document .getElementById("grafCount").options.length = 0; 


for (i=0; i«nodeChgArea.getElementsByTagName("p").length; i++) { 
document. getElementById("grafCount").options[i] = new Option(i+1); 
} 


evt.preventDefault(); 
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@Add node (Delete node 
Paragraph # y 1 Submit 
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110-4 在 添加 节点 之 后 ，Paragraph # 弹 出 菜单 包含 段落 号 的 列表 





eoo Deleting Selected Nodes B eoo Deleting Selected Nodes H 

S 0 j| ^ LAJE? | +_ © diaropooxusercon tent.com € grades ||. SS 0 [A ALES + © al.cropboxusercont tent.com c acade 1 LO. 
Add node @Delete node Add node @ Delete node 

Paragraph 上 [4 =) Subewt Paragraph #: (1 :] Sube 

1 never think of the furure - it comes soon enough. - Albert Einstein 1 never think of the future - it comes soon enough. ~ Albert Einstein 

We make a living by what we get, we make a life by what we give. - Sir Winston We make a living by what we get, we make a life by what we give. - Sir Winston 

Churchill Churchill 

If you would not be forgotten as soon as you are dead and rotten, cither write something 1f you would not be forgotten as soon as you are dead and rotten, cither write something 

worth reading or do things worth the writing. - Benjamin Franklin worth reading or do things worth the writing. - Benjamin Franklin 

Life isn't fair. Irs just fairer than death, that's all. — William Goldman The longer I live the more beautiful life becomes. — Frank Lloyd Wright 

The longer I live the more beautiful life becomes. — Frank Lloyd Wright 

















图 10-5. 首先， 选中 Delete node 单 选 按钮 ， 然 后 从 弹出 菜单 中 选择 要 删除 的 段落 ( 左 
图 )。 单 击 Submit 按钮 就 会 删除 选择 的 段落 (William Goldman 的 一 段 话 )， 下 


面 的 段落 会 向 上 移动 ( 右 图 ) CEN 
p^ 删除 特定 节点 


1. nodeChgArea = document.getElementById("modifiable"); 

因为 HTML 页 面 现在 有 多 个 段落 ， 所 以 不 容易 跟踪 哪些 段落 可 以 删除 ， 哪 些 不 可 以 删除 。 所 以 ， 
我 们 建立 一 个 全 新 的 区 域 : 一 个 id Jy modifiable 的 div。 在 这 里 ,将 全 局 变量 nodeChgArea 设置 为 这 
个 元 素 节 点 。 


2. var grafChoice = document.getElementById("grafCount").selectedIndex; 




















var allGrafs = nodeChgArea.getElementsByTagName("p"); 
var oldGraf - allGrafs.item (grafChoice); 
当 用 户 选 择 进 行 段落 删除 时 , 他 们 还 必须 选择 要 删除 的 段落 。 我 们 从 grafCount 字段 读 取 段 落 号 ， 
并 且 将 它 存储 在 grafChoice 中 。 然 后 ， 将 allGrafs 变量 设置 为 nodeChangingArea 中 的 所 有 段落 ， 并 
且 将 要 删除 的 段落 存储 在 oldGraf 中 。 
3. nodeChgArea. removeChild(oldGraf) ; 
这 个 步骤 与 前 一 个 示例 中 相同 , 唯一 的 差异 是 : 当 它 运行 时 , 我 们 会 看 到 页 面 中 间 的 某 个 段落 消失 了 。 
V 提示 
口 你 理解 其 他 代码 的 作用 有 困难 吗 ? nodeChanger() 函 数 按 出 现 的 次 序 组 合 了 脚本 2-15、 脚 本 6-5 
和 脚本 6-13 的 功能 。 在 程序 设计 中 ,一 种 非常 常见 的 做 法 是 ， 建 立 一 个 由 简单 例 程 组 成 的 库 ， 
然后 根据 需要 ， 将 它们 组 合成 更 复杂 的 完整 程序 。 
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O 注意 ， 在 前 面 的 代码 中 ,我 们 在 以 前 使 用 docBody 的 地 方 使 用 了 nodeChgArea 
时 , 很 容易 将 代码 改 为 处 理 其 他 元 素 节 点 。 在 这 里 , 我 们 只 搜索 页 面 的 一 部 分 而 不 是 整个 页 面 




















但 是 总 体 方法 是 相同 的 。 























在 操作 节点 





, 


O 我 们 也 可 以 不 把 nodeChgArea 声明 为 全 局 变量 并 且 在 initAl1() 中 对 它 进行 初始 化 ， 而 是 在 使 


用 它 的 每 个 函数 中 局 部 地 创建 和 初始 化 它 。 这 两 种 方式 各 有 优 缺 点 。 在 这 


式 ， 这 样 我 们 就 不 必 多 次 对 它 进行 初始 化 。 
10.5 插入 节点 





有 ,我 们 选用 全 局 方 


除了 删除 不 在 文档 末尾 处 的 节点 之 外 ,还 可 能 希望 在 文档 末尾 之 外 的 其 他 位 置 添 加 节点 。 通 过 使 

















新 节点 。 





脚本 10-7” 另 一 个 单 选 按钮 和 一 些 脚 本 修改 提供 了 第 三 个 选项 一 在 另 一 个 段落 前 男 


<!DOCTYPE html» 
<html> 
<head> 
<title>Inserting Nodes</title> 
<script src="script04.js"></script> 
</head> 
<body> 
<form id="theForm"> 
<p><textarea id-"textArea" rows="5" cols="30"></textarea></p> 
<p> 
<label><input type="radio" name="nodeAction">Add node«/label» 
<label><input type="radio" name="nodeAction">Delete node</label> 
<label><input type="radio" name="nodeAction">Insert before node</label> 
</p> 
Paragraph #: «select id="grafCount"></select> 
<input type="submit" value-"Submit"» 
</form> 
<div id="modifiable"> </div> 
</body> 
</html> 


脚本 10-8 用 户 现在 可 以 在 页 面 上 的 任何 地 方 添加 文本 


window. addEventListener("load", initAl1, false); 
var nodeChgArea; 


function initAll() { 


document .getElementById("theForm").addEventListener("submit" ,nodeChanger, false); 


nodeChgArea = document.getElementById("modifiable"); 
} 


function addNode() { 
var inText = document.getElementById("textArea").value; 


var newText = document.createTextNode(inText) ; 


var newGraf = document.createElement("p"); 
newGraf.appendChild(newText); 


nodeChgArea. appendChild(newGraf); 





用 脚本 10-7 (HTML ) 和 脚本 10-8， 可 以 选择 让 新 节点 出 现在 哪里 。 在 图 10-6 中 ， 


可 以 看 到 如 何 插入 











插入 文本 
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} 


function delNode() { 
var grafChoice = document.getElementById("grafCount").selectedIndex; 
var allGrafs = nodeChgArea.getElementsByTagName("p"); 
var oldGraf = allGrafs.item(grafChoice); 


nodeChgArea.removeChild(oldGraf); 
} 


function insertNode() { 
var grafChoice = document.getElementById("grafCount").selectedIndex; 
var inText = document.getElementById("textArea").value; 


var newText = document.createTextNode(inText); 
var newGraf = document.createElement("p"); 
newGraf.appendChild(newText); 


var allGrafs - nodeChgArea.getElementsByTagName("p"); 
var oldGraf = allGrafs.item(grafChoice) ; 


nodeChgArea. insertBefore(newGraf,oldGraf); 


} 


function nodeChanger(evt) { 
var actionType = -1; 
var pGrafCt = nodeChgArea.getElementsByTagName("p") . length; 
var radioButtonSet - document.getElementById("theForm").nodeAction; 
for (var i=0; i«radioButtonSet.length; i++) ( 
if (radioButtonSet[i].checked) { 
actionType - i; 





} 


switch(actionType) { 
case 0: 
addNode() ; 
break; 
case 1: 
if (pGrafCt > 0) { 
delNode(); 
break; 
} 
case 2: 
if (pGrafCt > 0) { 
insertNode(); 
break; 


} 
default: 
alert("No valid action was chosen"); 
} 
document .getElementById("grafCount").options.length = 0; 
for (i=0; i«nodeChgArea.getElementsByTagName("p").length; i++) { 
document .getElementById("grafCount").options[i] = new Option(i+1); 
} 


evt.preventDefault(); 
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1 was born not knowing and have bad caly a little time to change chat here and there. - Richard Feynman 





create problems, itis not through ignorance thet we can salve them. - Isaac Asimov 


1 was born not knowing and have bad only a little time to change that here and there. ~ Richard Feynman 

















图 10-6 要 想 插 入 段落 ， 只 需 单 击 Insert before node 单 选 按钮 ， 选 择 作 为 插 和 人 点 的 段落 
(ERK), 输入 文本 ， 然 后 单 击 Submit 按钮 (AA ) 


> 插入 节点 














1. var grafChoice = document.getElementById("grafCount").selectedIndex; 
var inText = document.getElementById("textArea").value; 
为 了 搬入 一 个 段落 ， 我 们 需要 知道 两 个 信息 : 用 户 希 望 插入 段落 的 位 置 CgrafChoice) 以 及 他 们 
希望 插入 的 文本 ( inText )。 
2. var newText = document.createTextNode(inText); 
var newGraf = document.createElement("p"); 
newGraf.appendChild(newText) ; 
这 是 创建 新 的 段落 节点 并 且 以 用 户 文本 填充 它 的 标准 方法 。 
3. var allGrafs = nodeChgArea.getElementsByTagName("p") ; 











var oldGraf = allGrafs.item(grafChoice) ; 
同样 ， 我 们 收集 区 域 中 的 所 有 p 标签 ， 然 后 将 目标 段落 (我 们 将 在 这 个 段落 前 面 插入 新 段落 ) ff 
WTE oldGraf 中 。 
4. nodeChgArea. insertBefore(newGraf ,oldGraf) ; 
插入 新 节点 的 方法 是 调用 insertBefore() 方 法 并 且 传 递 两 个 参数 : 新 节点 和 一 个 现 有 的 节点 〈 新 
节点 要 插入 在 这 个 节点 前 面 )。 
v 提示 
O 你 可 能 会 认为 ， 既然 有 insertBefore() 方 法 ， 就 应 该 有 insertAfter() 方 法 ,但 并 非 如 此 。 如 
果 和 希望 在 页 面 末尾 添加 节点 ， 就 需要 使 用 appendChild() 方 法 。 


10.6 替换 节点 


可 以 删除 现 有 节点 并 且 搬 入 新 节点 , 但 是 直接 替换 节点 更 简单 。 脚 本 10-9 (HTML ) 和 脚本 10-10 
演示 如 何 用 一 个 节点 蔡 换 另 一 个 节点 。 图 10-7 显示 蔡 换 的 效果 。 
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脚本 10-9 这 个 HTML 页 面 在 前 面 示例 的 基础 上 添加 了 Replace node 单 选 按钮 


<!DOCTYPE html> 
<html> 
<head> 
<title>Replacing Nodes</title> 
<script src="script05.js"></script> 
</head> 
<body> 
<form id="theForm"> 
<p><textarea id-"textArea" rows="5" cols="30"></textarea></p> 
<p> 
<label><input type="radio" name="nodeAction">Add node«/label» 
<label><input type="radio" name="nodeAction">Delete node</label> 
<label><input type="radio" name="nodeAction">Insert before node</label> 
<label><input type="radio" name= "nodeAction">Replace node</label> 
</p> 
Paragraph #: <select id="grafCount"></select> 
<input type="submit" value-"Submit"» 
</form> 
<div id="modifiable"> </div> 
</body> 
</html> 


脚本 10-10 最终， 用 户 可 以 在 页 面 上 添加 、 删 除 和 蔡 换 任何 文本 


window.addEventListener("load",initAll, false); 
var nodeChgArea; 











function initAll() { 
document .getElementById("theForm") .addEventListener("submit" ,nodeChanger, false); 
nodeChgArea = document.getElementById("modifiable"); 





} 


function addNode() { 
var inText = document.getElementById("textArea").value; 
var newText = document.createTextNode(inText) ; 


var newGraf = document.createElement("p"); 
newGraf.appendChild(newText); 


nodeChgArea. appendChild(newGraf); 
} 


function delNode() { 
var grafChoice = document.getElementById("grafCount").selectedIndex; 
var allGrafs = nodeChgArea.getElementsByTagName("p") ; 
var oldGraf = allGrafs.item(grafChoice) ; 


nodeChgArea. removeChild(oldGraf) ; 
} 


function insertNode() { 
var grafChoice = document.getElementById("grafCount").selectedIndex; 
var inText = document.getElementById("textArea").value; 


var newText = document.createTextNode(inText) ; 
var newGraf = document.createElement("p"); 
newGraf.appendChild(newText); 


var allGrafs = nodeChgArea.getElementsByTagName("p") ; 
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var oldGraf = allGrafs.item(grafChoice); 


nodeChgArea. insertBefore(newGraf,oldGraf); 
} 


function replaceNode() { 
var grafChoice = document.getElementById("grafCount").selectedIndex; 
var inText = document.getElementById("textArea").value; 


var newText - document.createTextNode(inText); 

var newGraf - document.createElement("p"); 
newGraf.appendChild(newText); 

var allGrafs = nodeChgArea.getElementsByTagName("p") ; 
var oldGraf - allGrafs.item(grafChoice); 


nodeChgArea. replaceChild(newGraf,oldGraf); 
} 


function nodeChanger(evt) { 
var actionType - -1; 
var pGrafCt - nodeChgArea.getElementsByTagName("p") . length; 
var radioButtonSet = document.getElementById("theForm").nodeAction; 


for (var i=0; i«radioButtonSet.length; i++) ( 
if (radioButtonSet[i].checked) { 
actionType - i; 


} 


switch(actionType) { 
case 0: 
addNode() ; 
break; 
case 1: 
if (pGrafCt > 0) { 
delNode(); 
break; 
} 
case 2: 
if (pGrafCt > 0) { 
insertNode(); 
break; 
} 
case 3: 
if (pGrafCt > 0) { 
replaceNode() ; 
break 


} 
default: 
alert("No valid action was chosen"); 
} 


document .getElementById("grafCount").options.length = 0; 


for (i=0; i<nodeChgArea.getElementsByTagName("p").length; i++) { 
document. getElementById("grafCount").options[i] = new Option(i+1); 
} 


evt.preventDefault(); 
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图 10-7 在 这 里 ， 我 们 将 第 三 个 段落 (AE) 奉 换 为 新 的 文本 ( 右 图 ) 


口 nodeChgArea.replaceChild(newGraf,oldGraf); 

这 个 脚本 中 只 有 这 一 行 是 你 需要 注意 的 新 代码 ( 对 脚本 其 余部 分 的 解释 见 本 章 前 面 的 小 节 )。 按 照 与 
前 一 节 相似 的 方式 , 我 们 只 需 用 两 个 参数 调用 replaceChild(): 要 替换 进 页 面 的 节点 和 要 被 替换 掉 的 节点 。 
10.7 用 对 象 字面 量 编 写 代码 

正如 后 面 的 补充 内 容 “ 关 于 对 象 字面 量 ” 所 述 ， 编 写 JavaScript 的 方法 不 只 一 种 。 脚 本 10-11 演 
示 如 何 把 脚本 10-10 改写 为 使 用 对 象 字面 量 。 
脚本 10-11 这 个 简短 的 脚本 演示 对 象 字 面 量 的 许多 特性 


window. addEventListener("load", initAl1, false); 
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function initAll() { 
document .getElementById("theForm") .addEventListener("submit" ,nodeChanger, false); 
chgNodes.init(); 

} 


function nodeChanger(evt) { 
return chgNodes.doAction(evt) ; 
} 


var chgNodes = { 
actionType: function() { 
var radioButtonSet = document.getElementById("theForm").nodeAction; 
for (var i=0; i«radioButtonSet.length; i++) { 
if (radioButtonSet[i].checked) { 
return i; 
} 


} 


return -1; 


b 


allGrafs: function() { 
return this.nodeChgArea.getElementsByTagName("p") ; 
b 


pGrafCt: function() { 
return this.allGrafs().length; 
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b 


inText: function() { 
return document.getElementById("textArea"). value; 


) 


newText: function() ( 
return document.createTextNode(this.inText()); 


b 


grafChoice: function() { 
return document.getElementById("grafCount").selectedIndex; 


) 


newGraf: function() ( 
var myNewGraf - document.createElement("p"); 
myNewGraf.appendChild(this.newText()); 
return myNewGraf; 


) 


oldGraf: function () { 
return this.allGrafs().item(this.grafChoice()); 


b 


doAction: function(evt) { 
switch(this.actionType()) { 
case 0: 
this .nodeChgArea.appendChild(this.newGraf()); 
break; 
case 1: 
if (this.pGrafCt() > 0) ( 
this.nodeChgArea.removeChild(this.oldGraf()); 
break; 
j 
case 2: 
if (this.pGrafCt() » 0) ( 
this.nodeChgArea.insertBefore(this.newGraf(),this.oldGraf()); 
break; 
} 


case 3: 
if (this.pGrafCt() > 0) ( 
this.nodeChgArea.replaceChild(this.newGraf(),this.oldGraf()); 
break; 


default: 
alert("No valid action was chosen"); 
j 


document.getElementById("grafCount").options.length - 0; 


for (var i=0; i«this.pGrafCt(); i++) { 
document.getElementById("grafCount").options[i] = new Option(i+1); 


} 
evt.preventDefault(); 


) 


init: function() ( 
this.nodeChgArea = document.getElementById("modifiable"); 
} 
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关于 对 象 字 面 量 
到 目前 为 止 看 到 的 JavaScript 都 是 标准 的 过 程式 JavaScript， 它 们 采用 点 号 表示 格式 : 
var myCat = new Object; 
myCat.name = "Pixel"; 


myCat.breed = "Tuxedo"; 
myCat.website = "www.pixel.mu"; 


function allAboutMyCat() { 


alert("Can I tell you about my cat?"); 
tellMeMore = true; 


} 
如 果 采 用 对 象 字面 量 格式 ， 这 段 代 码 应 该 改写 为 下 面 这样 : 
var myCat = { 
name: "Pixel", 
breed: "Tuxedo", 
website: "www.pixel.mu", 
allAbout: function() ( 
alert("Can I tell you about my cat?"); 
tellMeMore - true; 
) 
} 


对 于 这 两 种 格式 ， 都 可 以 用 点 号 表示 法 引用 myCat 的 属性 ， 比 如 myCat.name。 但 是 ， 在 采用 对 
象 字面 量 格式 时 ， 函 数 变 成 myCat.allAbout() 而 不 是 allAboutMyCat(). 

你 可 能 觉得 这 种 格式 有 点 儿 眼 熟 ， 没 错 ， 它 在 许多 方面 与 CSS 非常 相似 。 在 最 基本 的 层面 上 ， 
它 实际 上 是 一 个 属性 一 值 对 的 列表 , 属性 和 值 之 间 以 冒号 分 隔 , 各 个 属性 一 值 对 之 间 有 一 个 分 隔 符 。 
在 使 用 对 象 字面 量 时 ， 要 记 住 几 点 差异 。 

口 使 用 :而 不 是 = 设置 属性 。 
口 行 以 ,而 不 是 ;结尾 。 
口 在 对 象 中 的 最 后 一 个 语句 上 不 需要 去 号 。 


> 使 用 对 象 字 面 量 


1. document.getElementsById("theForm").addEventListener("submit", nodeChanger, false); 
chgNodes . init(); 
与 前 面 看 到 的 代码 一 样 ， 必 须 首先 进行 初始 化 。 第 一 行 与 以 前 看 到 的 相同 , 但 是 第 二 行 有 点 儿 不 
一 样 : 它 调 用 chgNodes 对 象 中 的 init() eae. 
2. function nodeChanger(evt) { 
return chgNodes.doAction(evt); 


} 
这 里 的 nodeChanger() 函 数 仅仅 调用 chgNodes.doAction() 。 稍 后 解释 为 什么 不 直接 调用 这 个 函数 。 
3. var chgNodes = { 
这 是 chgNodes 对 象 的 开头 。 创 建 对 象 的 方式 与 设置 变量 相似 , (EES ERA 
一 组 语句 。 
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4. actionType: function() ( 
var radioButtonSet - document.getElementsById("theForm").nodeAction; 
for (var i=0; i«radioButtonSet.length; i++) { 
if (radioButtonSet[i].checked) { 
return i; 
} 
} 
return -1; 
b 
在 这 个 脚本 的 前 一 个 版 本 中 ，nodeChanger() 函 数 的 第 一 部 分 设置 actionType 变量 。 在 这 里 ， 
actionType() 是 chgNodes 的 一 个 方法 。 尽 管 代码 风格 不 一 样 ， 但 最 终结 果 应 该 是 相同 的 。 
5. allGrafs: function() { 
return this.nodeChgArea.getElementsByTagName("p") ; 


) 

















pGrafCt: function() { 
return this.allGrafs().length; 
b 
这 是 chgNodes 中 的 两 个 简单 函数 : allGrafs() 和 pGrafCt()。 因 为 它们 会 返回 值 ， 所 以 可 以 在 任 
何 地 方 使 用 它们 添加 、 替 换 或 删除 节点 。 
6. doAction: function(evt) { 
switch(this.actionType()) { 
case 0: 
this.nodeChgArea.appendChild(this .newGraf()); 
break; 
doAction() 函 数 处 理 chgNodes 所 需 的 大 多 数 工 作 一 一 这 几 行 代码 只 是 这 个 函数 的 开头 部 分 。 与 前 
个 版 本 一 样 ， 通 过 检查 单 选 按钮 了 解 应 该 执行 哪 种 操作 ， 并 通过 switch 语句 执行 这 个 操作 。 
7. init: function() { 
this.nodeChgArea = document.getElementById("modifiable"); 
} 
最 后 是 init() 函 数 ， 它 的 作用 只 是 初始 化 nodeChgArea 供 以 后 使 用 。 最 重要 的 是 ， 在 这 个 例 程 







































































的 末尾 不 加 逗号 一 一 除了 最 后 一 个 语句 之 外 ,每 个 语句 都 应 该 以 逗号 结尾 〈 函数 本 质 上 是 一 个 扩展 的 
语句 )。 
V 提示 


O 对 于 步骤 1 和 步 又 2， 你 可 能 会 奇怪 为 什么 不 直接 写成 : 
document . getElementsById("theForm")addEventListener("submit", chgNodes.doAction(), false); 
你 还 可 能 会 奇怪 为 什么 在 代码 中 如 此 频繁 地 使 用 this? 这 两 个 问题 的 答案 是 相同 的 。 

















10.7 ”用 对 象 字 面 量 编写 代码 203 























在 对 象 字面 量 中 ， 只 需 通过 引用 this， 就 能 够 引用 这 个 对 象 的 所 有 属性 和 方法 。 如 果 使 用 
var 命令 ( 就 像 myNewGraf 或 radioButtonSet 那样 )， 它 就 是 一 般 的 变量 ,不 能 在 父 对 象 之 外 
访问 它 。 如 果 不 使 用 var， 而 且 总 是 以 this.XXX 形式 引用 它们 ， 这些 属 性 就 成 为 对 象 本 身 的 
组 成 部 分 。 
但 是 ， 对 象 字面 量 的 this 必须 遵守 JavaScript 对 于 this 的 一 般 规 定 一 一 this 引用 的 内 容 取决 
于 调用 它 的 位 置 。 如 果 从 表单 直接 调用 chgNodes.doAction(), AKA this 引用 的 是 表单 对 象 ， 
这 不 是 我 们 想 要 的 结果 。 在 nodeChanger() 中 调用 chgNodes.doAction(), 就 能 够 解决 这 个 问题 。 
口 如 果 你 正在 考虑 放弃 过 程式 JavaScript， 转 而 采用 对 象 字面 量 风格 ,但 是 还 没有 下 决心 ， 那 么 请 
注意 一 个 理由 : 脚本 10-11 的 作用 与 脚本 10-10 完全 相同 , 但 是 它 的 代码 长 度 缩短 了 大 约 20%。 
口 本 章 没有 对 节点 操纵 进行 全 面 的 讨论 , 仅仅 提供 了 一 些 示例 来 帮助 你 入 门 。 如 果 和 希望 进一步 了 
解 所 有 可 用 的 属性 和 方法 ,那么 请 参考 本 章 开 头 提 到 的 W3C 规范 。 

































































































































































为 什么 要 使 用 对 象 字面 量 
到 目前 为 止 , 你 主要 是 阅读 别人 的 代码 。 如 果 阅 读 比 较 长 的 代码 或 者 由 许多 人 协作 编写 的 代码 ， 
就 很 可 能 遇 到 看 起 来 非常 古怪 的 代码 。 这 很 可 能 是 因为 它们 使 用 对 象 字 面 量 , 这 是 一 种 很 不 一 样 的 
JavaScript 编程 方式 ( 但 是 同样 有 效 )。 
程序 员 为 什么 要 使 用 对 象 字 面 量 而 不 是 过 程式 方法 来 编写 JavaScript 呢 ? 这 有 以 下 几 个 原因 。 
口 因为 每 个 对 象 ( 包括 方法 和 属性 ) 都 包含 在 一 个 父 对 象 中 ， 所 以 不 会 遇 到 无 意 间 履 盖 别人 的 
代码 的 问题 。 如 果 在 你 和 你 的 同事 各 自负 责 的 .js 文件 中 都 有 一 个 名 为 myText 的 变量 ， 一 些 
页 面 会 加 载 这 两 个 文件 ， 那 么 页 面 后 加 载 的 文件 优先 一 一 它 会 直接 窗 盖 另 一 个 交 量 ,就 像 根 
本 没有 加 载 过 原来 的 代码 一 样 。 解 决 方案 是 确保 不 使 用 全 局 变量 ， 而 实现 这 一 点 最 简单 的 方 
法 就 是 把 你 的 所 有 代码 都 放 在 一 个 对 象 字 面 量 中 。 
口 对 象 字 面 量 的 一 个 子 集 被 称 为 JavaScript Object Notation ， 简 称 为 ISON ( 读音 与 人 名 Jason 
近似 )。JSON 是 Ajax 中 最 常用 的 数据 格式 之 一 ， 因 此 在 使 用 Ajax 时 经 常会 遇 到 这 种 格式 。 
口 最 后 ， 与 所 有 东西 一 样 ， 编 程 语言 的 风格 也 在 随 着 潮流 变化 。JavaScript 本 身 正 在 经 历 第 二 
次 (或 者 说 第 三 次 ) 飞跃 ， 业 界 重 新 唤起 了 对 脚本 编程 的 兴趣 。 当 前 的 潮流 倾向 于 使 用 对 象 
字面 量 ， 所 以 用 对 象 字 面 量 编写 的 代码 会 越 来 越 多 。 
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色 的 网 页 是 许多 不 同 因 素 的 综合 结果 ， 包 括 引 人 注目 的 内 容 、 良 好 的 设计 和 对 细节 的 关注 ， 比 
如 加 载 页 面 的 速度 有 多 快 。 加 快 页 面 加 载 ( 同时 仍然 向 用 户 提供 有 趣 的 交互 式 体验 ) 的 方法 之 
一 ， 是 在 用 户 的 浏览 器 中 使 用 JavaScript 对 单独 的 页 面 元 素 进行 更 新 。 换 名 话说 ，Web 服务 器 并 不 直接 向 
用 户 提供 页 面体 验 ， 而 是 通过 因特网 发 送 脚本 。 然 后 ， 脚 本 利用 用 户 计算 机 的 能 力 构造 出 页 面 。 带 有 这 种 
脚本 的 页 面 可 以 称 为 动态 页 面 dynamic page ). 
通过 将 处 理 过 程 从 服务 器 端 转移 到 客户 〈 用 户 ) 端 ， 就 可 以 获得 更 好 的 性 能 并 且 提 供 某 种 程度 的 
个 性 化 用 户 体验 。 
在 本 章 中 ， 你 将 学 习 如 何 使 用 JavaScript 在 网 页 上 显示 本 地 日 期 和 时 间 ， 使 用 用 户 所 在 地 的 时 间 
对 问候 语 进行 定制 ， 在 不 同 的 时 间 格 式 间 转 换 ， 以 及 在 脚本 的 控制 下 跨 用 户 的 页 面 移动 对 象 。 


11.1 在 网 页 上 显示 当前 日 期 


JavaScript 可 以 判断 出 计算 机 上 的 当前 日 期 和 时 间 ( 以 数字 形式 ), 然后 以 许多 方式 操作 这 个 数字 。 
但 是 , 脚本 必须 处 理 从 数字 到 文本 型 日 期 的 转换 。 脚 本 11-1 演示 如 何 获得 当前 日 期 , 将 它 从 数字 转换 
为 标准 的 日 期 ， 然 后 将 结果 写 到 文档 窗口 。 
脚本 11-1 这 个 脚本 将 当前 日 期 写 到 文档 窗口 


window. addEventListener("load", initDate, false); 













































































function initDate() { 
var dayName = new Array("Sunday","Monday", "Tuesday", "Wednesday","Thursday", "Friday", "Saturday"); 
var monName - new Array("January","February", "March", "April", "May","June", "July", "August", 
"September", "October", "November", "December"); 


var now - new Date(); 
var dtString = dayName[now.getDay()] + ", " + monName[now.getMonth()] + " " + now.getDate(); 


document.getElementById("dtField").innerHTML - dtString; 





> 将 当前 日 期 写 到 网 页 








1. window. addEventListener("load", initDate, false); 


当 加 载 文档 时 ， 调 用 initDate(). 
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2. var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", 
»"Saturday") ; 


首先 需要 创建 一 个 新 数组 ， 其 中 包含 一 周 中 日 的 名 称 。 一 定 要 用 逗号 分 隔 数组 中 的 元 素 ， 而 且 因 
为 它们 是 文本 字符 串 ， 所 以 每 个 元 素 必 须 放 在 引号 中 。 将 这 个 数组 赋值 给 变量 dayName。 
3. var monName = new Array("January", "February", "March", "April", "May", "June", "July", 
"August", "September", "October", "November", "December"); 
在 这 一 步 中 ， 创 建 包含 月 份 名 称 的 数组 ， 并 且 将 这 个 数组 赋值 给 变量 monName 
4. var now = new Date(); 
然后 ， 让 JavaScript 创建 一 个 新 的 Date 对 象 ， 将 它 命 名 为 now， 其 中 包含 当前 日 期 。 
5. var dtString = dayName[now.getDay()] + "," + monName[now.getMonth()] +" " + now.getDate(); 
以 从 右 到 左 的 次 序 理解 dayName[now.getDay()] 对 象 。getDay() 是 用 来 获得 一 周 中 日 的 JavaScript 77 
它 向 now 对 象 询问 今天 是 星期 几 。 然 后 ， 用 数字 结果 引用 dayName 数组 中 的 对 应 元 素 。 
接 下 来 ,在 正在 构造 的 文本 字符 串 后 加 上 一 个 逗号 和 一 个 空格 ,再 连接 下 一 个 表达 式 monName[now. 
getMonth()], ， 这 个 表达 式 返 回 月 份 名 称 。 与 前 一 个 表达 式 一 样 ， 它 先 获得 月 份 号 ， 然 后 引用 monName 
数组 中 的 对 应 元 素 。 
接 下 来 ,加 一 个 空格 ,最 后 加 上 now.getDate() , 这 个 方法 返回 月 中 的 日 。 将 整个 字符 串 赋 值 给 dtstring 
量 。 
6. document.getElementById("dtField").innerHTML = dtString; 
HTML 页 面 上 的 一 个 <span> 标 签 具有 id dtField (HTML 非常 简单 ， 所 以 这 里 没有 给 出 )， 如 下 所 示 : 
<h1>Today is <span id="dtField"> </span>.</h1> 
JavaScript 将 dtField 元 素 的 innerHTML 属性 设置 为 dtString 的 值 。 结 果 见 图 11-1. 
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Today is Monday, March 10. 





























图 11-1 JavaScript 动态 地 在 窗口 中 显示 当前 日 期 











JavaScript 对 时 间 的 处 理 方式 不 一 致 
正如 本 书 前 面 提 到 的 ，JavaScript 在 大 多 数 情况 下 从 零 开始 编号 ， 所 以 数字 序列 是 0、1、2、3,， 等 
等 。 但 是 ,日 期 是 从 1 开始 编号 的 。 所 以 ， 如 果 有 一 个 包含 周 中 日 的 数组 ， 就 会 得 到 : 


Sunday = 0 
Monday = 1 
Tuesday = 2 


Wednesday = 3 
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Thursday = 4 
Friday = 5 
Saturday = 6 


同样 ，12 个 月 份 的 编号 是 从 0 到 11。 

另 一 方面 ， 在 处 理 月 中 的 日 期 时 ， 从 0 开始 编号 是 没有 意义 的 ( 比如 ， 不 可 能 说 4 月 0 日 )， 所 以 
JavaScript 对 日 期 从 1 开始 编号 。 

小 时 是 从 0 (午夜 ) 到 23 (MEM 点 )， 这 与 24 小 时 制 是 一 致 的 。 在 本 章 后 面 ， 我 们 会 演示 如 何 
把 24 小 时 制 转 换 为 12 小 时 制 。 


11.2 “处理 周 中 的 日 期 
如 果 某 一 天 是 周末 ， 你 可 能 希望 向 用 户 显 示 不 同 的 消息 。 脚 本 11-2 演示 了 具体 做 法 。 
脚本 11-2 ”这 个 脚本 判断 某 一 天 是 否 是 周末 


window. addEventListener("load", initDate, false); 











function initDate() { 
var now = new Date(); 


if (now.getDay() > 0 && now.getDay() < 6) { 
var dtString = "Sorry, it's a weekday."; 
} 
else { 
var dtString = "Hooray, it's a weekend!"; 


} 


document. getElementById("dtField").innerHTML = dtString; 
} 


> 判断 是 否 是 周末 | 








1. var now = new Date(); 
首先 将 变量 now 设置 为 当前 日 期 。 

2. if (now.getDay() > 0 8& now.getDay() < 6) ( 

这 一 行 从 now 变量 中 提取 出 数字 式 的 周 中 的 日 期 , 检查 它 是 否 大 于 0 ( 记 住 星期 日 是 0 )。 接 下 来 ， 
使 用 88 操 作 符 ( 这 是 逻辑 与 ， 表 示 两 部 分 必须 都 为 真 )， 然 后 检查 它 是 否 小 于 6 ( 星期 六 )。 

3.var dtString = "Sorry, it's a weekday."; 

如 果 表 达 式 的 结果 大 于 0 HDF 6， 那么 它 一 定 在 1 到 5 之 间 ， 即 从 星期 一 到 星期 五 ， 所 以 脚本 
在 dtString 中 设置 对 应 的 字符 串 。 

4.else { 

var dtString = "Hooray, it's a weekend!"; 

如 果 步 又 2 中 的 测试 失败 了 ,那么 一 定 是 周末 ， 所 以 在 dtString 中 设置 对 应 的 字符 串 。 

5. document.getElementById("dtField").innerHTML = dtString; 

最 后 , 像 前 面 的 示例 中 一 样 , 将 dtField 元 素 的 innerHTML 属性 设置 为 dtString 的 值 。 结 果 见 图 11-2. 
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Hooray, it's a weekend! 














11-2 ”消息 写 到 了 窗口 中 


11.3 ”根据 时 间 对 消息 进行 定制 


可 以 使 用 前 一 个 示例 中 的 技术 ,根据 时 间 对 消息 进行 定制 。 当 用 户 进 入 站 点 时 ， 这 种 技术 常常 用 
来 提供 友好 的 问候 语 。 脚 本 11-3 演示 具体 做 法 ,图 11-3 显示 的 是 在 一 般 人 已 经 人 睡 的 时 间 段 ， 页 面 
上 显示 的 消息 。 
脚本 11-3 ”这 个 脚本 用 来 检查 时 间 ， 并 且 作出 相应 的 反应 


window.addEventListener("load",initDate, false); 












































function initDate() { 
var now = new Date(); 
document. getElementById("dtField").innerHTML = timeString(now.getHours()); 


function timeString(theHour) { 
if (theHour < 5) { 
return "What are you doing up so late?"; 





} 
if (theHour < 9) { 
return "Good Morning!"; 


if (theHour < 17) { 
return "No surfing during working hours!"; 


return "Good Evening!"; 
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What are you doing up so late? 














图 11-3 ”如 果 出 现 这 条 消息 ， 那 么 肯定 夜 深 了 











> 根据 时 间 对 消息 进行 定制 








C] if (theHour < 5) { 
return "What are you doing up so late?"; 











这 个 脚本 中 的 新 代码 首先 进行 一 个 条 件 测试 。getHours () 方 法 从 now 变量 中 提取 出 小 时 ， 然 后 检查 这 











个 数字 是 否 小 于 5( 对 应 于 凌晨 $ 点 ， 因 为 JavaScript 中 的 小 时 是 从 午夜 0 点 开始 编号 的 )。 
如 果 当 前 时 间 在 凌晨 $ 点 之 前 ， 脚 本 就 将 这 个 消息 写 到 文档 窗口 ， 如 图 11-3 所 示 。 
































脚本 的 其 余部 分 进行 类 似 的 检查 ， 针 对 不 同 的 时 间 ， 写 出 不 同 的 消息 。 如 果 在 凌晨 5 点 和 上 午 9 点 之 











间 ， 就 显示 “Good Morming!”; 在 上 午 9 点 和 下 午 5 点 之 间 ， 就 显示 “No surfing during working hours!” 
在 下 午 5 点 之 后 ， 就 显示 “Good Evening!”。 


11.4 ”根据 时 区 显示 日 期 





在 默认 情况 下 ， 显 示 的 日 期 和 时 间 是 用 户 计算 机 上 的 日 期 和 时 间 (假设 它们 的 设置 是 正确 的 )。 如 果 
希望 显示 其 他 地 方 的 日 期 ， 就 需要 根据 协调 世界 时 ( Coordinated Universal Time, UTC ) 计算 它 。UTC 本 
质 上 是 格林 尼 治 标准 时 间 ( Greenwich Mean Time, GMT ) 的 别名 , UTC 也 称 为 “世界 时 间 ”( Universal Time, 




















UT )。 脚 本 11-4 是 这 个 页 面 的 HTML， 脚 本 11-5 中 的 JavaScript 演示 如 何 计算 其 他 时 区 中 的 日 期 。 


脚本 11-4 时 区 脚本 的 HTML 使 用 类 来 标 出 不 同 办 公 室 的 时 区 


<!DOCTYPE html» 
<html> 
<head> 
<title>Time Zones</title> 
<script src-"script04.js"»«/script» 
</head> 
<body> 
«h3»0ur office hours are 9:00 am to 5:00 pm, Monday through Friday, at each of our locations.It is now 
</h3><ul> 
<li><span class="tz-8"> </span> in San Francisco«/li» 
<li><span class="tz-5"> </span> in New York«/li» 
<li><span class="tz-0"> </span> in London«/li» 
<li><span class="tz+7"> </span> in Hong Kong«/li»«/ul» 
</body> 
</html> 


脚本 11-5 ”可 以 调整 这 个 脚本 来 显示 任何 时 区 中 的 时 间 


window. addEventListener("load", initDate, false); 


function initDate() { 
var spanTags = document.getElementsByTagName("span") ; 


for (var i=0; i<spanTags.length; i++) { 
if (spanTags[i].className.indexOf("tz") == o) { 
showTheTime(spanTags[i], spanTags[i].className.substring(2)); 
} 


} 
} 


function showTheTime(currElem,tzOffset) { 
var dayName = new Array("Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday") ; 
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var thatTZ = new Date(); 
var dateStr = thatTZ.toUTCString(); 


dateStr = dateStr.substr(0,dateStr.length - 3); 
thatTZ.setTime(Date.parse(dateStr)); 
thatTZ.setHours(thatTZ.getHours() + parseInt(tzOffset)); 


currElem.innerHTML = showTheHours(thatTZ.getHours()) + showZeroFilled(thatTZ.getMinutes()) + showAmPm 
'(thatTZ.getHours()) + dayName[thatTZ.getDay()]; 


function showTheHours(theHour) { 
if (theHour == 0) ( 
return 12; 


} 
if (theHour < 13) { 
return theHour; 


return theHour-12; 


} 


function showZeroFilled(inValue) { 
if (inValue > 9) { 
return ":" + inValue; 


} 


return ":0" + inValue; 


} 


function showAmPm(thatTime) { 
if (thatTime < 12) { 
return " AM "; 


return " PM "; 


} 
} 


> 根据 时 区 显示 日 期 


1. var spanTags = document.getElementsByTagName("span") ; 
在 initDate() 函 数 中 创建 spanTags 变量 。document.getElementsByTagName("span") 命 令 是 一 种 很 方 
便 的 技巧 一 一 span 让 JavaScript 返回 一 个 包含 页 面 上 所 有 标签 的 数组 。 然 后 就 可 以 遍历 这 个 数组 ， 寻 
找 感 兴趣 的 标签 。 
2. for (var i=0; i«spanTags.length; i++) { 
if (spanTags[i].className.indexOf("tz") -- o) ( 






































showTheTime(spanTags[i], spanTags[i].className.substring(2)); 








} 
} 
开始 一 个 循环 , 对 spanTags 数组 包含 的 页 面 元 素 进 行 遍历 。spanTags[i].className.indexOf ("tz")==0 
的 意思 是 ,“ 第 ;个 标签 是 否 具 有 以 如 开头 的 class 属性 ”一 一 如 果 是 这 样 ， 就 调用 showTheTime(). 


























传递 给 showTheTime() 两 个 参数 : 第 一 个 是 第 i 个 标签 元 素 , 第 二 个 是 class 属性 ( 见 脚本 11-4 ) 
中 “tz” 后 面 的 部 分 ， 这 由 substring(2) 表 示 。 为 什么 不 在 showTheTime() 函 数 中 进行 这 个 计算 呢 ?” 这 
会 使 showTheTime() 更 简单 ， 因 为 第 二 个 参数 明确 地 提供 时 区 偏 移 量 。 
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3. function showTheTime(currElem, tzOffset) { 

这 个 函数 接受 前 一 步 中 传递 给 它 的 两 个 参数 。 在 这 个 函数 中 ， 这 两 个 参数 分 别称 为 currElem 和 
tz0ffset. 

4. var thatTZ = new Date(); 

var dateStr = thatTZ.toUTCString(); 

创建 一 个 新 的 日 期 变量 thatTZ。 下 一 行将 日 期 和 时 间 (基于 UT 形式 ) 转换 为 字符 串 ( 见 本 章 末 

尾 的 表 11-1 )， 将 结果 存储 在 dateStr 中 。 
5. dateStr = dateStr.substr(0,dateStr.length - 3); 
在 本 节 中 , 我 们 和 希望 将 thatTz 重新 设置 为 基于 UT 而 不 是 本 地 时 间 ， 然 后 就 能 够 加 上 传递 进来 的 

有 移 量 以 获得 所 需 的 结果 。 但 是 ，JavaScript 不 允许 这 么 简单 地 处 理 。 我 们 现在 有 了 字符 串 格式 的 世 
界 时 间 ， 但 是 ， 如 果 根 据 它 重新 设置 时 间 ， 它 会 误解 我 们 的 意图 ， 认 为 我 们 真 的 需要 本 地 时 间 。 我 们 
需要 做 的 是 ， 获 得 日 期 和 时 间 的 字符 串 版 本 ， 并 且 去 掉 最 后 三 个 字符 〈 即 UTC )。 

6. thatTZ.setTime(Date.parse(dateStr) ); 

去 掉 最 后 三 个 字符 之 后 ， 可 以 使 用 parse 方法 将 日 期 转换 为 毫秒 ,然后 用 setTime 方法 将 thatTZ 
设置 为 我 们 需要 的 时 间 。 

7. thatTZ.setHours(thatTZ.getHours() + parseInt(tzOffset)); 

既然 已 经 存储 了 UT 日 期 ， 就 需要 加 上 传递 进来 的 小 时 数 ， 也 就 是 我 们 需要 的 时 间 与 UT 的 偏 移 
量 。 因 为 时 区 可 以 从 +12 到 -12， 所 以 传递 进来 的 时 区 可 以 是 "-12" 到 "+12" 之 间 的 某 个 数 。 我 们 使 用 
parseInt() 将 这 个 字符 串 转换 为 -12 ~ 12 的 一 个 数字 ,然后 将 它 与 当前 UT 时 间 相 加 。 结 果 就 是 我 们 需 
要 的 值 : 这 个 时 区 中 的 正确 日 期 和 时 间 。 

8. currElem.innerHTML = showTheHours(thatTZ.getHours()) + showZeroFilled(thatTZ.getMinutes()) + 

'ShowAmPm(thatTZ.getHours()) + dayName[thatTZ.getDay()]; 

这 一 行 看 起 来 让 人 糊涂 , 其 实 它 仅仅 是 将 其 他 函数 的 结果 拼接 起 来 , 构造 出 要 放 进 文档 的 时 间 值 ， 

然后 设置 currElem 的 innerHTML 属性 ， 从 而 将 计算 的 结果 放 进 文档 中 。 最 终 的 结果 见 图 11-4。 
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Our office hours are 9:00 am to 5:00 pm, Monday through Friday, at each 
of our locations. It is now 


* 5:39 PM Monday in San Francisco 
* 8:39 PM Monday in New York 

o 1:39 AM Tuesday in London 

© 8:39 AM Tuesday in Hong Kong 














图 11-4. 这 个 脚本 根据 时 区 计算 出 每 个 办 公 室 的 时 间 





下 面 三 个 函数 showTheHours() 、showZeroFilled() 和 showAmPm() 都 在 showThe Time() 函 数 内 部 ,所 以 它 
们 可 以 共享 变量 。 可 以 看 到 ， 这 里 并 没有 这 样 做 ， 但 下 一 节 就 会 用 到 。 
9. function showTheHours(theHour) { 
if (theHour == 0) { 
return 12; 
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首先 ， 建立 showTheHours() 函 数 ， 它 包含 参数 theHour。 如 果 theHour EF, JARE 12 ( 表示 中 午 
12 点 ); 否则 继续 执行 后 面 的 代码 。 
10. if (theHour < 13) { 
return theHour; 
} 
return theHour-12; 
如 果 时 间 的 小 时 部 分 小 于 13， 那 么 只 需 直 接 返 回 变量 theHour。 和 否则 ， 返 回 theHour 减 12 ( 这 会 
将 中 午 以 后 的 小 时 数 转换 为 12 小 时 制 )。 
11. function showZeroFilled(inValue) { 
if (inValue > 9) { 
return ":" + inValue; 
} 
return ":0" + inValue; 
} 
这 个 函数 用 来 使 输出 更 整齐 。 当 分 钟 数 或 秒 数 小 于 等 于 9 时 ， 它 在 数字 前 面 加 上 一 个 零 。 
12. function showAmPm(thatTime) { 
if (thatTime < 12) { 
return " AM "5; 
) 
return " PM "; 
) 
这 个 函数 在 时 间 后 面 添 加 AM 或 PM。 如 果 传 递 的 变量 thatTime 小 于 12， 那 么 函数 的 返回 值 是 
AM; ANJ, REI PM, WE, TE AM 和 PM 文本 字符 串 前 面 加 上 空格 ， 这 是 为 了 让 效果 更 好 看 。 
v tem 
O 没有 处 理 夏 令 时 (Daylight Saving Time ) 的 简便 方法 。 一 些 浏览 器 会 错误 地 处 理 夏 令 时 , 而 且 ， 
是 否 能 够 处 理 夏令 时 还 依赖 于 计算 机 用 户 是 否 知 道 如 何 设置 他 们 的 计算 机 。 好 在 Windows 和 
OS X 能够 根据 因特网 时 间 服 务 顺 自动 地 设置 时 间 ， 这 会 将 夏令 时 考虑 进去 ， 所 以 可 以 绥 解 这 
个 问题 。 糟 糕 的 是 ，JavaScript 无 法 从 操作 系统 获得 关于 夏令 时 的 信息 ， 所 以 它 无 法 判断 出 你 
所 处 的 时 间 和 地 点 是 否 应 用 夏令 时 。 
口 很 容易 在 HTML 中 添加 另 一 个 城市 ， 而 且 不 需要 修改 JavaScript， 脚 本 仍然 可 以 正常 工作 。 


11.5 18 24 小 时 制 转换 为 12 小 时 制 


JavaScript 以 24 小 时 制 提供 时 间 。 许 多 人 不 熟悉 或 不 喜欢 这 种 格式 ,所 以 可 能 希望 将 它 转换 为 12 
小 时 制 。 在 下 面 的 两 个 脚本 中 , 你 将 看 到 完成 此 任务 的 一 种 方法 。 这 个 页 面 ( HTML 见 脚本 11-6, CSS 
见 脚本 11-7) 有 两 个 重要 的 元 素 : h 标签 和 两 个 单 选 按 钮 。 脚 本 将 时 间 写 入 前 者 ， 而 使 用 两 个 单 选 按 
钮 ， 用 户 可 以 在 24 小 时 制 和 12 小 时 制 之 间 进 行 切换 ( 见 图 11-5 )。JavaScript 见 脚 本 11-8。 
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图 11-5 ”脚本 运行 的 效 


脚本 11-6 ”这 个 HTML 使 用 id 标识 每 个 单 选 按钮 


<!DOCTYPE html» 
<html> 
<head> 
<title>JavaScript Clock</title> 
<link href-"scriptO5.css" rel="stylesheet"> 
<script src="script05.js"></script> 
</head> 
<body> 
<div class="centered"> 
«h2 id-"showTime"» </h2> 
Display 24-hour Clock? 
<input type="radio" name-"timeClock" id-"show24" checked»«label for-"show24"»Yes«/label» 
«input type-"radio" name-"timeClock" id-"show12"»«label for-"show12"»No«/label» 


im 
d 


</div> 
</body> 
</html> 
脚本 11-7 下面 的 样式 使 页 面 更 好 看 
body { 
background-color: #FFF; 
} 
.centered { 
text-align: center; 
} 
label { 


padding-right: 10px; 


脚本 11-8 ”这 个 脚本 在 24 小 时 制 和 12 小 时 制 之 间 进 行 转换 
window. addEventListener("load", showTheTime, false); 


function showTheTime() { 
var now = new Date(); 


document. getElementById("showTime").innerHTML = showTheHours(now.getHours()) + showZeroFilled(now. 
getMinutes()) + showZeroFilled(now.getSeconds()) + showAmPm(); 
setTimeout(showTheTime, 1000); 


function showTheHours(theHour) ( 
if (show24Hour() || (theHour > 0 && theHour « 13)) { 
return theHour; 


} 
if (theHour == 0) { 
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return 12; 


return theHour-12; 


} 


function showZeroFilled(inValue) { 
if (inValue > 9) { 
return ":" + inValue; 


return ":0" + inValue; 


} 


function show24Hour() { 
return (document.getElementById("show24").checked) ; 
} 


function showAmPm() { 
if (show24Hour()) { 
return ""; 


if (now.getHours() < 12) { 
return " AM"; 
} 


return " PM"; 
} 
} 


=> 把 24 小 时 制 转 换 为 12 小 时 制 
1. document.getElementById("showTime").innerHTML = showTheHours(now.getHours()) + showZero 
aoa + t e ic isis. + showAmPm() ; 
与 前 一 个 示例 中 一 样 ， 这 一 行 看 起 来 让 人 糊涂 ， 其 实 它 仅仅 是 将 其 他 函数 的 结果 连接 起 来 ,构造 
出 要 在 页 面 上 显示 的 时 间 值 。 AE ee ni 上 
2. setTimeout(showTheTime, 1000); 
DEFT ARS EDU Và si RERP E Br M UC o 
3. function showTheHours(theHour) { 
接 下 来 ， 建 立 showTheHours 函数 ， 它 包含 参数 theHour. 
4. if (show24Hour() || (theHour > 0 8& theHour « 13)) { 
return theHour; 
} 
if (theHour == 0) { 
return 12; 


} 


return theHour-12; 

这 些 条 件 语 句 的 意思 是 : 如 果 用 户 希 望 显示 24 小 时 制 , 或 者 时 间 的 小 时 部 分 大 于 零 且 小 于 13( 记 
住 ，| | 操作 符 表示 逻辑 或 ,你 在 第 1 章 已 经 看 到 过 它 了 )， 那 么 直接 返回 变量 theHour。 如 果 theHour 
是 零 ， 就 返回 12 (表示 中 午 12 点 ) 和 否则， 返回 theHour Jà 12 (这 会 将 中 午 以 后 的 小 时 数 转 换 为 用 
12 小 时 制 表 示 )。 
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5. function show24Hour() { 
return document .getElementById("show24") .checked; 
这 个 函数 根据 用 户 在 页 面 上 选中 的 单 选 按钮 ， 返 回 一 个 值 。 如 果 选 中 了 show 24， 就 返回 true f, 
否则 返回 false。 
6. if (show24Hour()) { 
return ""; 
} 
if (now.getHours() < 12) { 
return " AM"; 
} 
return " PM"; 
这 个 函数 在 12 小 时 时 间 后 面 加 上 AM 或 PM. ane eka show24Hour 返回 true， 它 就 不 返回 任何 
内 容 ， 而 进入 下 一 个 函数 。 在 函数 showMilitaryTime 返回 false 的 情况 下 ,如 果 now 变量 的 小 时 部 分 小 
于 12, 那么 这 个 函数 返回 AM, 否则 返回 PM. 同样 , 在 AM 和 PM 前 面 加 一 个 空格 以 使 输出 更 美观 。 


11.6 ”创建 倒数 计数 器 


有 时候， 可 能 希望 在 页 面 上 建立 一 个 倒数 计数 器 ， 告 诉 用 户 离 未 来 的 某 个 事件 还 有 多 少 天 或 多 少 
小 时 。 脚 本 11-9 (HTML ) 和 脚本 11-10 (JavaScript ) 提醒 本 书 的 另 一 位 作者 : 快 到 我 的 生日 和 圣诞 
节 了 ， 该 为 我 准备 礼物 了 。 其 效果 见 图 11-6。 




































































Sex| 
Dynamic d 
c c tt dl.dropboxusercontent.com e z 
Dori says 
It's only 150 days antl my birthday and 290 days nn Christmas sn yon'd 
better start shopping now! 
And it's only 57 days until our anniversary 

















图 11-6 ”这 个 页 面 用 于 提醒 男 一 位 作者 
脚本 11-9 ”倒数 计数 器 脚本 的 HTML 


<!DOCTYPE html» 
<html> 
<head> 
<title>Dynamic Countdown</title> 
<script src="script06.js"></script> 
</head> 
<body> 
<p>Dori says:</p> 
<p>It's only «span class-"daysTill" id="bday"> </span> days until my birthday and «span class-"daysTill" 
'id-"xmas"» </span> days until Christmas, so you'd better start shopping now!«/p» 
«p»And it's only «span class-"daysTill" id-"anniv"» «/span» days until our anniversary...«/p» 
«/body» 
«/html» 
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脚本 11-10 ”这 个 脚本 实现 倒数 计数 器 ， 它 计算 Tom 还 有 多 少 天 不 在 家 


window. addEventListener("load", showDays, false); 


function showDays() { 
var spanTags = document.getElementsByTagName("span"); 


for (var i-0; i«spanTags.length; i++) { 
if (spanTags[i].className.indexOf("daysTill") » -1) ( 
spanTags[i].innerHTML = showTheDaysTill(spanTags[i].id); 


} 


function showTheDaysTill(thisDate) { 
var theDays; 


switch(thisDate) { 

case "anniv": 
theDays = daysTill(5,6); 
break; 

case "bday": 
theDays = daysTill(8,7); 
break; 

case "xmas": 
theDays = daysTill(12,25); 
break; 

default: 


return theDays + 


} 


function daysTill(mm,dd) { 
var now = new Date(); 
var inDate = new Date(now.getFullYear() ,mm-1, dd); 





if (inDate.getTime() < now.getTime()) { 
inDate.setYear(now. getFullYear()+1); 
} 


return Math.ceil(dayToDays(inDate) - dayToDays(now)); 
} 


function dayToDays(inTime) { 
return inTime.getTime() / (1000 * 60 * 60 * 24); 
} 
} 


aai ACE EE 
l.var spanTags = document.getElementsByTagName(" span") ; 
创建 一 个 新 数组 spanTags， 并 用 页 面 上 的 所 有 标签 填充 它 。 
2. for (var i-0; i«spanTags.length; i++) { 
if (spanTags[i].className.indexOf("daysTill") > -1) { 
spanTags[i].innerHTML = showTheDaysTill(spanTags[i].id); 
} 
这 个 循环 遍历 spanTags 数组 ， 检 查 在 页 面 上 任何 标签 的 class 




















性 中 是 否 能 够 找到 字符 串 daysTill. 
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请 记 住 ， 一 个 标签 可 以 有 多 个 class 属性 (Bll class="firstClass daysTill somethingElse fourthThing" )。 
如 果 找 到 了 daysTil1， 就 调用 showTheDaysTil1() 消 数 ， 并 且 传 递 给 它 一 个 参数 : 这 个 标签 的 id (这 
个 id 表示 要 在 这 个 页 面 中 显示 哪个 日 期 )。 这 个 函数 返回 一 个 值 ， 然 后 将 这 个 值 放 进 innerHTML。 
3. switch(thisDate) { 
case "anniv": 
theDays = daysTill(5,6); 
break; 























case "bday": 
theDays = daysTill(8,7); 
break; 
case "xmas": 
theDays = daysTill(12,25); 
break; 
default: 
如 果 你 不 记得 switch/case 多 级 条 件 结构 了 ,那么 可 以 回顾 第 2 章 中 的 讨论 ,在 这 里 ,我们 使 用 thisDate 
的 值 针对 3 个 case 语句 进行 测试 。 对 于 anniv 分 支 , 将 theDays 设置 为 5 月 6 日 (5、6 是 数字 表示 , 很 像 
现实 中 日 期 的 写法 ); 对 于 bday， 将 它 设置 为 8 月 7 日 ; 对 于 xmas，theDays 设置 为 12 月 25 日。 


"on, 
d 





























4. return theDays + 
showTheDays () 函数 最 后 返回 日 的 编号 和 一 个 空格 。 加 空格 是 为 了 解决 IE 中 的 一 个 问题 : 它 会 消除 
HTML 中 的 空格 。 如 果 脚 本 不 在 未 尾 返 回 空格 ， 数 字 就 会 与 单词 days 靠 在 一 起 。 如 果 把 单词 days 放 在 这 
个 函数 中 ， 就 不 需要 在 后 面 加 空格 了 。 
5. function daysTill(mm,dd) { 
var now = new Date(); 

















var inDate = new Date(nowgetFullYear() ,mm-1,dd) ; 
这 一 步 建立 daysTil1() 函 数 ， 这 个 函数 接受 来 自 步骤 3 中 的 case 语句 的 日 期 。 然 后 ， 创 建 变量 now 
和 inDate。 后 一 个 变量 设置 为 当前 年 份 以 及 传递 进来 的 月 份 ( 要 减 1 才能 获得 正确 的 结果 ， 见 后 面 的 补充 
内 容 “ 时 间 处 理 的 其 他 怪异 之 处 ”) 和 日 编号 。 
6. if (inDate.getTime() < now.getTime()) { 
inDate.setYear (now.getFullYear()41); 
} 
然后 ， 将 这 个 日 期 与 今天 进行 比较 。 如 果 今 年 的 这 个 日 期 已 经 过 了 ， 就 将 年 份 递增 ， 从 而 以 下 一 年 的 
日 期 作为 对 比 的 目标 。 
7. return Math.ceil(dayToDays(inDate) - dayToDays(now)); 
在 这 里 ， 我 们 计算 inate 和 当前 日 期 之 间 的 天 数 。Math.ceil() 方 法 确保 结果 是 一 个 整数 。 
8. function dayToDays(inTime) { 
return inTime.getTime() / (1000 * 60 * 60 * 24); 
JavaScript 将 日 期 存储 为 自 1970 年 1 月 1 日 以 来 的 毫秒 数 。 为 了 比较 两 个 日 期 , 需要 把 它 改 为 自 1970 
年 1 月 1 日 以 来 的 天 数 。 首 先 , 计算 一 天 的 毫秒 数 : 1000 (1 秒 内 的 毫秒 数 ) FELL 60 (1 分钟 内 的 秒 数 )， 
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HAELA 60 C1 小 时 内 的 分 钟 数 )， 然 后 乘 以 24 (1 天 内 的 小 时 数 ) 将 getTime() 返 回 的 毫秒 数 除 以 这 个 数 
字 ， 就 会 得 到 自 1970 年 1 月 1 日 以 来 的 天 数 。 


+! 














时 间 处 理 的 其 他 怪异 之 处 

在 JavaScript 中 ， 月 份 从 0 开始 编号 ， 而 目 从 1 开始 编号 ， 而 且 根据 浏览 器 使 用 的 JavaScript 版 本 ， 
JavaScript 处 理 1970 年 之 前 的 年 份 的 方法 也 不 一 致 。 

Navigator 2 ( 使 用 JavaScript 1.0 ) 根 本 不 能 处 理 1970 年 之 前 的 年 份 , 而 且 有 2000 年 问题 (Year 2000 
Problem )， 因 此 对 于 2000 年 或 之 后 的 日 期 ,会 返回 错误 的 结果 。 在 Navigator 3( 使 用 JavaScript 1.1 ) 
中 ， 如 果 年 份 在 20 世纪 ，getYear() 方 法 返回 的 值 是 两 位 的 ; 如 果 年 份 在 1900 年 之 前 或 2000 年 之 后 ， 
就 返回 四 位 数字 。 但 是 ， 并 非 所 有 Netscape 版 本 都 是 这 种 情况 ,例如 Mac 的 Netscape Navigator 4 对 于 
2000 年 返回 100。 更 糟糕 的 是 ， 在 Firefox 中 仍然 有 这 种 情况 一 一 在 当前 版 本 (27) 中 ，getYear() 仍 然 
返回 两 位 数字 ( 对 于 21 世纪 的 年 份 就 会 出 现 错误 )。 

JavaScript 1.2 ( 在 Navigator 4 以 及 兼容 ECMAScript 的 浏览 器 中 使 用 ， 比 如 IE4 和 更 高 版 本 ) 引入 
了 一 个 新 方法 getFullYear()， 这 个 方法 总 是 返回 四 位 的 年 份 。 如 果 你 为 版 本 4 和 更 高 版 本 的 浏览 器 设 
计 页 面 ， 那 么 建议 使 用 getFullYear(), 我 们 在 本 书 中 就 是 这 么 做 的 。 

由 于 某 些 原因 ，JavaScript 中 的 getTime() 方 法 返回 自 1970 年 1 月 1 日 以 来 的 毫秒 数 。 好 在 我 们 几 
乎 用 不 着 查看 这 个 数字 ， 因 为 过 去 40 年 的 毫秒 数 是 一 个 非常 大 的 数字 。 





11.7 ”隐藏 和 显示 层 


尽管 HTML、CSS 和 JavaScript 组 合 可 以 形成 一 个 文档 ,但 是 有 时 候 让 效果 看 起 来 像 是 有 多 个 文档 更 
有 用 。 例如 , 通过 CSS 和 JavaScript 的 组 合 , 在 当前 HTML 页 面 内 部 (或 上 面 ) 显示 弹出 窗口 之 类 的 东西 。 
不 ， 这 不 使 用 废弃 的 Netscape layer 标签 ， 它 只 是 看 起 来 像 是 单独 的 一 层 ， 用 户 只 关心 效果 。 

这 需要 3 个 文档 : HTML 文档 ( 见 脚本 11-11 )、CSS 样式 表 ( 见 脚本 11-12 ) 和 JavaScript 文件 (IL 
脚本 11-13 )。 我 们 通过 JavaScript 使 用 HTML 中 分 配 的 id 来 操作 图 像 ， 使 用 CSS 设置 广告 在 页 面 上 的 位 
E. 尤其 是 它 的 z-index, 这 个 数字 决定 哪个 对 象 显 示 在 其 他 对 象 上 面 。 当 两 个 对 象 占据 同一 空间 时 , 会 显 
AN z-index 值 大 的 对 象 。 


脚本 11-11 这 个 广告 示例 的 HTML 使 用 id 标 出 要 操作 的 元 素 


<!DOCTYPE html> 
<html> 
<head> 
<title>Layered Divs</title> 
<link href="scripto7.css" rel="stylesheet"> 
<script src="script07.js"></script> 
</head> 
<body> 
<div id="annoyingAdvert"> 
This is an incredibly annoying ad of the type you might find on some web sites. 
<div id="closeBox">&otimes; </div> 
</div> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean lacus elit, volutpat vitae, 
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egestas in, tristique ut, nibh. Donec congue lacinia magna. Duis tortor justo, dapibus vel, 
»vulputate sed, mattis sit amet, leo. Cras purus quam, semper quis, dignissim id, hendrerit eget, 
'ante. Nulla id lacus eget nulla bibendum venenatis. Duis faucibus adipiscing mauris. Integer 
'augue. In vulputate purus eget enim. Nam odio eros, porta vitae, bibendum sit amet, iaculis nec, 
velit. Cras egestas scelerisque pede. Donec a tellus. Nullam consectetuer fringilla nunc.«/p» 


«p»Nam varius metus congue ligula. In hac habitasse platea dictumst. In ut ipsum a pede rhoncus 
convallis.Sed at enim. Integer sed metus quis est egestas vestibulum. Quisque mattis tortor 
'a lorem. Nam diam. Integer consequat lectus. Donec molestie elementum nisl. Donec ligula sapien, 
volutpat eget, dictum quis, mollis a, odio. Aliquam augue enim, gravida nec, tempor ac, interdum 
in, urna. Aliquam mauris. Duis massa urna, ultricies id, condimentum ac, gravida nec, dolor. 
^Morbi et est quis enim gravida nonummy. Cum sociis natoque penatibus et magnis dis parturient 
"montes, nascetur ridiculus mus. Mauris nisl quam, tincidunt ultrices, malesuada eget, posuere 
reu, lectus. Nulla a arcu. Sed consectetuer arcu et velit. Quisque dignissim risus vel elit.«/p» 


«p»Nunc massa mauris, dictum id, suscipit non, accumsan et, lorem. Suspendisse non lorem quis dui 
^rutrum vestibulum. Quisque mauris. Curabitur auctor nibh non enim. Praesent tempor aliquam 
'ligula. Fusce eu purus. Vivamus ac enim eget urna pulvinar bibendum. Integer porttitor, augue 
ret auctor volutpat, lectus dolor sagittis ipsum, sed posuere lacus pede eget wisi. Proin vel 
"arcu ac velit porttitor pellentesque. Maecenas mattis velit scelerisque tellus. Cras eu tellus 
quis sapien malesuada porta. Nunc nulla. Nullam dapibus malesuada lorem. Duis eleifend rutrum 
tellus. In tempor tristique neque. Mauris rhoncus. Aliquam purus.«/p» 


«p»Morbi felis quam, placerat sed, gravida a, bibendum a, mauris. Aliquam porta diam. Nam consequat feugiat 
diam. Fusce luctus, felis ut gravida mattis, ante mi viverra sapien, a vestibulum tellus lectus 
ut massa. Duis placerat. Aliquam molestie tellus. Suspendisse potenti. Fusce aliquet tellus 
^a lectus. Proin augue diam, sollicitudin eget, hendrerit non, semper at, arcu. Sed suscipit 
"tincidunt nibh. Donec ullamcorper. Nullam faucibus euismod augue. Cras lacinia. Aenean 
"scelerisque, lorem sed gravida varius, nunc tortor gravida odio, sed sollicitudin pede augue 
^ut metus. Maecenas condimentum ipsum et enim. Sed nulla. Ut neque elit, varius a, blandit quis, 
"facilisis sed, velit. Suspendisse aliquam odio sed nibh.«/p» 


«/body» 
«/html» 

脚本 11-12 CSS 对 这 个 层 应 用 样式 ， 让 它 看 起 来 与 文档 的 其 余部 分 不 一 样 
body { 


background-color: #FFF; 
} 


#annoyingAdvert { 
position: absolute; 
z-index: 2; 
display: none; 
width: 100px; 
background-color: #FFC; 
padding: 10px; 
margin: 10px; 
border: 5px solid yellow; 
} 


#closeBox { 
position: absolute; 
color: red; 
font-size: 1.5em; 
top: 0; 
right: 0; 
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脚本 11-13 JavaScript 显示 这 个 层 并 人 允许 用 户 隐藏 它 〈 谢 天 谢 地 ) 


window. addEventListener("load", initAdvert, false); 


function initAdvert() { 
var adBox = "annoyingAdvert"; 


document. getElementById(adBox).style.display = "block"; 

document. getElementById("closeBox") .addEventListener 
"click" 
function() { 

document .getElementById(adBox).style.display = "none"; 
b 
false 
); 
} 


> 隐藏 和 显示 对 象 








1. var adBox = "annoyingAdvert"; 
document.getElementById(adBox).style.display = "block"; 
看 了 脚本 11-11, 就 会 知道 要 显示 的 层 的 id 是 annoyingAdvert, 脚本 11-11 告诉 这 个 层 它 最 初 应 该 
是 隐藏 的 ， 所 以 看 不 到 它 。 但 是 ， 在 加 载 页 面 之 后 ， 脚 本 通过 把 display 属性 设置 为 block 来 显示 它 。 
2. document.getElementById("closeBox").addEventListener("click") 
function() { 
document .getElementById(adBox).style.display = "none"; 
} 
false 
); 
为 什么 这 个 元 素 名 为 annoyingAdvert? 因为 无 法 阅读 它 背 后 的 内 容 ( 见 图 11-7) 但 是 , 我 们 不 想 
讨 人 厌 ， 所 以 让 用 户 能 够 通过 单 击 关闭 控件 关闭 这 个 层 〈 即 隐藏 它 )。 把 display 属性 设置 为 none， 就 
会 关闭 这 个 层 。 
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sit amet, leo. Cras purus quam, semper quis, dignissim id, hendrerit 
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rhoncus convallis. Sed at enim. Integer sed metus quis est egestas vestibulum. Quisque 
mattis tortor a lorem. Nam diam. Integer consequat lectus. Donec molestie elementum 
nisl. Donec ligula sapien, volutpat eget, dictum quis, mollis a, odio. Aliquam augue enim, 
gravida nec, tempor ac, interdum in, urna. Aliquam mauris. Duis massa urna, ultricies id, 
condimentum ac, gravida nec, dolor. Morbi et est quis enim gravida nonummy. Cum 
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris 
nisl quam, tincidunt ultrices, malesuada eget, posuere eu, lectus. Nulla a arcu. Sed 
consectetuer arcu et velit. Quisque dignissim risus vel elit. 
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图 11-7 广告 出 现在 左边 ， 用 户 可 以 关闭 它 
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11.8 ”移动 文档 中 的 对 象 


可 以 使 用 JavaScript 让 对 象 ( 图 像 、 文 本 等 ) 在 屏幕 上 到 处 移动 。 实 际 上 ， 甚 至 可 以 让 对 象 看 起 
来 像 是 在 进行 三 维 移动 ， 让 对 象 在 文档 中 的 其 他 对 象 背后 移动 。 在 这 个 示例 中 ， 你 将 看 到 前 个 任务 中 
的 广告 图 像 是 如 何 更 令 人 讨厌 的 。 

这 个 示例 需要 3 个 文档 ， 其 中 HTML 文档 和 CSS 样式 表 与 前 一 版 本 一 样 ， 这 里 仅 给 出 JavaScript 
文件 〈 见 脚本 11-14 )。 现 在 ， 当 用 户 要 关闭 广告 层 时 ， 它 会 “ 跑 开 ”。 谢 天 谢 地 ， 在 跑 出 屏幕 之 前 它 
会 停 下 来 ( 见 图 11-8 )， 最 终 能 够 关闭 它 ! 


脚本 11-14 移动 广告 的 JavaScript 


window. addEventListener("load", initAdvert, false); 


























function initAdvert() { 
var adBox = "annoyingAdvert"; 


document .getElementById(adBox).style.display = "block"; 
document. getElementById(adBox) .addEventListener("mouseover", slide, false); 
document .getElementById("closeBox").addEventListener ( 
"click", 
function() ( 
document.getElementById(adBox).style.display - "none"; 
b 


false 
5 
} 


function slide() { 
var adBox = "annoyingAdvert"; 


if (nextPos(adBox) <= (document.body.clientWidth-150)) { 
document. getElementById(adBox).style.left = nextPos(adBox) + "px"; 
setTimeout (slide, 100) ; 


} 


function nextPos(elem) { 
return document.getElementById(elem) .offsetLeft+1; 
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mattis tortor a lorem. Nam diam Integer consequat lectus. Donec molestie elementum 

nisl. Donec ligula sapien, volutpat eget, dictum quis, mollis a, odio. Aliquam augue enim, 
gravida nec, tempor ac, interdum in, urna. Aliquam mauris. Duis massa urna, ultricies id, 
condimentum ac, gravida nec, dolor. Morbi et est quis enim gravida nonummy. Cum 

sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris 

nisl quam, tincidunt ultrices, malesuada eget, posuere eu, lectus. Nulla a arcu. Sed 
consectetuer arcu et velit. Quisque dignissim risus vel elit 
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图 11-8 在 这 个 版 本 中 ,广告 会 移动 右边 ， 可 以 在 这 里 最 终 关 闭 它 
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> 移动 对 象 








1. document.getElementById(adBox).addEventListener("mouseover" , slide, false); 

为 了 开始 移动 ,在 广告 上 添加 一 个 mouseover 事件 处 理 程序 ， 让 它 触发 slide() PRB. 

2. if (nextPos(adBox) <= (document.body.clientWidth-150)) { 

在 移动 广告 层 之 前 ， 需 要 检查 它 的 位 置 是 否 处 于 限制 范围 内 一 一 实现 的 方法 是 获取 它 的 当前 位 置 
(使 用 nextPos() 函 数 ) 并 与 文档 窗口 的 宽度 作 比较 。 如 果 当 前 位 置 小 于 窗口 宽度 OE 150 像素 是 为 
了 把 层 本 身 的 宽度 考虑 进去 )， 那 么 就 希望 继续 移动 。 

3. document .getElementById(adBox).style.left = nextPos(adBox) + "px"; 

为 了 以 适合 各 种 浏览 器 的 方式 移动 广告 层 ， 我 们 必须 修改 它 的 style.left 属性 。 在 这 里 ， 获 取 对 
象 的 下 一 个 位 置 , 最 后 添加 px, 这 样 就 形成 了 style. left 属性 所 需 的 格式 。 只 需 修 改 style.left 属性 ， 
对 象 就 会 移动 到 新 的 位 置 。 

4. setTimeout (slide, 100) ; 

这 里 , 通过 调用 setTimeout(), 每 100 毫秒 (0.1 秒 ) 重复 调 

5. function nextPos(elem) { 

前 面 有 两 个 地 方 用 到 了 元 素 的 当前 位 置 ， 这 里 的 函数 用 来 获得 当前 位 置 。 这 个 函数 需要 的 参数 只 
是 元 素 的 id。 

6. return document.getElementById(elem) .offsetLeft+1; 

得 到 了 对 象 的 这， 就 可 以 找到 这 个 对 象 。 然 后 ， 只 需 获 取 对 象 的 offsetLeft 属性 ， 这 是 对 象 的 左 
边 位 置 。offsetLeft 属性 包含 一 个 数字 值 ， 所 以 可 以 按 原样 返回 它 。 

V 提示 

O 你 可 能 会 奇怪 : 既然 offsetLeft 是 数字 ， 为 什么 不 直接 设置 它 ， 而 要 修改 style.left 属性 ? 必须 

这 么 做 ， 因 为 offsetLeft 是 只 读 的 ， 也 就 是 说 ， 可 以 读 它 的 值 ， 但 是 不 能 修改 它 。 没 有 任何 跨 浏 
览 带 的 可 写 的 数字 型 定位 元 素 。 


11.9 日 期 方法 


因为 常常 需要 处 理 日 期 ， 所 以 这 里 用 一 个 表格 列 出 Date 对 象 的 所 有 方法 。 在 表 11-1 中 ,UTC 是 
Coordinated Universal Time 的 缩写 , 它 在 1986 年 取代 格林 尼 治 时 间 , 成 为 时 间 的 世界 标准 。 包 含 UTC 
的 方法 只 能 在 JavaScript 1.2 或 更 高 版 本 中 使 用 。 


表 11-1 日 期 方法 







































































slide()， 从 而 让 JavaScript 一 直 移 动 。 























































































































方 ” 法 tek ik El fü JavaScript 版 本 

getDate() 月 中 的 日 期 1~31 1.0 
getUTCDate() 1.2 
getday() 周 中 的 日 期 (整数 值 ) 0-6 1.0 
getUTCDay () 1.2 
getFullYear() 完整 的 四 位 年 份 1900+ 1.2 
getUTCFullYear() 

getHours() 日 中 的 时 期 (整数 值 ) 0-23 10 





getUTCHours() 12 
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( 续 ) 
A 法 fe xh 返回 fa JavaScript 版 本 
getMilliseconds() 4 上 一 秒 以 来 的 毫秒 数 0~999 1.2 
getUTCMilliseconds() 
getMinutes() 自 上 一 小 时 以 来 的 分 钟 数 0~59 1.0 
getUTCMinutes() 1.2 
getMonth() 年 中 的 月 份 0~11 1.0 
getUTCMonth() 1.2 
getSeconds() 1 上 一 分 钟 以 来 的 秒 数 0-59 1.0 
getUTCSeconds() 1.2 
getTime() 匀 1970 年 1 月 1 日 午夜 以 来 的 毫秒 数 
getTimezoneOffset() 本 地 时 间 和 GMT 之 间 相 差 的 分 钟 数 0~1439 1.0 
getYear() 日 期 的 年 份 部 分 对 于 1900~1999 年 的 年 份 ， 是 0~99;， 1.0 
对 于 以 后 的 年 份 ， 是 四 位 数字 
parse() 给 出 一 个 日 期 /时 间 字 符 串 ,返回 1.0 
1970 年 1 月 1 日 午夜 以 来 的 毫秒 数 
setDate() 给 出 1~31 之 间 的 数字 ， 设 置 天 以 毫秒 数 表示 的 日 期 (Wava Script 1.0 
setUTCDate() 1.2 开 始 ) 1.2 
setFullYear() 给 出 四 位 的 年 份 ， 设 置 年 份 以 毫秒 数 表 示 的 日 期 1.2 
setUTCFullYear() 
setHours() 给 出 0-23 之 间 的 数字 ， 设 置 小 时 以 毫秒 数 表示 的 日 期 (从 Java Script 1.0 
setUTCHours() 1.2 开 始 ) 1.2 
setMilliseconds() 给 出 0-999 之 间 的 数字 ， 设 置 毫 秒 以 毫秒 数 表示 的 日 1.0 
setUTCMilliseconds() 1.2 
setMinutes() 给 出 0~59 之 间 的 数字 ， 设 置 分 钟 以 毫秒 数 表示 的 日 期 (从 Java Script 1.0 
setUTCMinutes() 123145) 12 
setMonth() 给 出 0~11 之 间 的 数字 ， 设 置 月 份 以 毫秒 数 表示 的 日 期 (从 Java Script 1.0 
setUTCMoth() 1.2 开 始 ) 1.2 
setSeconds() 给 出 0~59 之 间 的 数字 ， 设 置 秒 以 毫秒 数 表示 的 日 期 (从 Java Script 1.0 
setUTCSeconds() 1.2 开 始 ) 1.2 
setTime() 给 出 自 1970 年 1 月 1 日 午夜 以 来 的 毫秒 ”以 毫秒 数 表示 的 日 期 1.0 
数 ， 设 置 日 
setYear() 给 出 两 位 或 四 位 数字 值 ， 设 置 年 份 以 毫秒 数 表示 的 日 期 (从 Java Script 1.0 
1.2 开 始 ) 
toGMTString() 字符 串 格式 的 GMT 日 期 和 时 间 day dd mm yyyy hh:mm:ss GMT 1.0 
toUTCString() 1.2 
toLocaleString() 字符 串 格式 的 本 地 日 期 和 时 间 根据 操作 系统 、 地 区 和 浏览 器 的 不 ”1.0 
同 ， 返 回 值 有 所 不 后 
toString() 字符 串 格式 的 本 地 日 期 和 时 间 根据 操作 系统 和 浏览 器 的 不 同 , 返 1.0 
可 值 有 所 不 同 
UTC() 给 出 年 、 月 、 日 (以 及 可 选 的 小 时 、 ”以 毫秒 数 表示 的 日 1.0 
分 钟 、 秒 和 毫秒 ) 格式 的 日 期 , 返回 
绊 1970 年 1 月 1 日 以 来 的 毫秒 数 
valueOf() 1970 年 1 月 1 日 午夜 以 来 的 毫秒 数 以 毫秒 数 表 示 的 日 12 
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本 书 前 面 的 各 章 中 , 你 学 习 了 如 何 使 用 许多 JavaScript 技术 实现 特定 的 任务 。 在 你 建立 的 许 
Esant, 常常 只 需要 使 用 一 种 技术 ， 而 且 能 够 使 用 本 书 中 的 脚本 来 完成 任务 〈 常常 只 需 
要 作 少 量 修改 )。 
但 是 ， 有 时 候 需要 使 用 多 种 技术 才能 完成 任务 ， 这 就 是 本 章 涉及 的 主题 。 本 章 中 的 任务 需要 结合 
使 用 各 种 技术 ， 而 且 这 些 任务 在 你 自己 的 Web 站 点 上 往往 很 常见 。 
在 本 章 中 ,你 将 学 习 如 何 用 大 纲 式 可 折 炙 菜单 和 下 拉 菜 单 改进 站 点 的 用 户 界面 ,创建 幻灯 片 ， 用 
JavaScript 处 理 文本 ,让 JavaScript 以 容易 理解 的 图 形 化 方式 显示 数据 ， 以 及 在 脚本 的 控制 下 在 不 同 的 
样式 表 之 间 切 换 。 


12.1 ”使 用 可 折 又 菜单 


BT T5837. (sliding menu ) 是 一 种 简单 的 用 户 界面 组 件 ， 可 以 利用 它 在 页 面 上 放置 许多 信息 ， 同 
时 又 不 会 使 页 面 显得 太 混乱 。 用 户 每 次 可 以 只 在 需要 时 查看 他 们 想 要 看 的 额外 信息 。 肢 本 12-1 包含 
HTML, 脚本 12-2 包含 CSS, Æ 12-3 包含 JavaScript， 如 下 所 示 。 


脚本 12-1 这 是 一 个 包含 许多 链接 的 简单 HTML 页 面 


<!DOCTYPE html> 
<html> 
<head> 
<title>Shakespeare's Plays</title> 
<link rel="stylesheet" href="script01.css"> 
«script src="script01.js"></script> 
</head> 
<body> 
<hi>Shakespeare's Plays</h1> 
<div> 
«a href="menu1.html" class="menuLink">Comedies</a> 
«ul class-"menu" id="menu1"> 
<li><a href-"pgi.html"»All's Well That Ends Well«/a»«/li» 
<li><a href="pg2.html">As You Like It«/a»«/li» 
<li><a href-"pg3.html"»Love's Labour's Lost«/a»«/li» 
<li><a href-"pg4.html"»The Comedy of Errors«/a»«/li» 
</ul> 
</div> 
<div> 
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«a href-"menu2.html" class="menuLink">Tragedies</a> 
«ul class-"menu" id-"menu2"» 
<li><a href="pg5.html">Anthony &amp; Cleopatra«/a»«/li» 
<li><a href-"pg6.html"»Hamlet«/a»«/li» 
<li><a href-"pg7.html"»Romeo &amp; Juliet«/a»«/li» 
</ul> 
</div> 
<div> 
«a href-"menu3.html" class-"menulink"»Histories«/a» 
«ul class-"menu" id-"menu3"» 
<li><a href-"pg8.html"»Henry IV, Part 1«/a»«/li» 
<li><a href-"pg9.html"»Henry IV, Part 2«/a»«/li» 
«/ul» 
</div> 
</body> 
</html> 


脚本 12-2 ”实现 可 折 生 菜单 效果 并 不 需要 很 多 CSS 


body { 
background-color: #FFF; 
color: #000; 


} 


div { 
margin-bottom: 10px; 
} 


ul.menu { 
display: none; 
list-style-type: none; 
margin-top: 5px; 


} 


a.menuLink { 
font-size: 1.2em; 
font-weight: bold; 


} 
脚本 12-3 ”这 个 脚本 可 以 控制 文本 〈 和 链接 ) 的 出 现 和 消失 
window.addEventListener("1oad" ,initAl1,false); 


function initAll() { 
var allLinks = document.getElementsByTagName("a"); 


for (var i=0; i«alllinks.length; i++) { 
if (allLinks[i].className.indexOf("menuLink") > -1) { 
allLinks[i].addEventListener("click", toggleMenu, flase) ; 
} 
} 
} 


function toggleMenu(evt) { 
var startMenu = this.href.lastIndexOf("/")41; 
var stopMenu = this.href.lastIndexOf("."); 
var thisMenuName = this.href.substring(startMenu, stopMenu) ; 


var thisMenuStyle = document. getElementById(thisMenuName) .style; 
if (thisMenuStyle.display == "block") { 
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thisMenuStyle.display = "none"; 


else { 
thisMenuStyle.display = "block"; 


evt.preventDefault(); 


} 
1. var allLinks = document.getElementsByTagName("a") ; 
当 页 面 加 载 时 ， 调 用 initAll() Rž, ARAA FCB TF Xi Thi E PUE EA s 
2. for (var i-0; i«alllinks.length; i++) ( 
if (allLinks[i].className.indexOf("menuLink") > -1) { 
alllinks[i].addEventListener("click",toggleMenu, false); 
) 
} 
在 找到 了 所 有 链接 之 后 ， 对 它们 进行 遍历 ， 查 找 具 有 menuLink 类 的 链接 ， 并 且 给 这 些 链 接 添加 
click 处 理 程序 。 在 这 里 ，click 处 理 程序 设置 为 在 单 击 链接 时 调用 toggleMenu() 函数 。 
3. var startMenu = this.href.lastIndexOf("/")41; 
var stopMenu = this.href.lastIndexOf("."); 
在 toggleMenu() 中 , JavaScript 给 出 了 this. 在 这 里 , this 是 用 户 单 击 的 链接 对 象 , 因此 this. href 
是 完整 的 链接 URL. 但 是 , 我们 只 需要 最 后 一 个 正 斜 本 和 最 后 一 个 点 号 之 间 的 部 分 ( 也 就 是 说 ， 如 果 
链接 指向 http://www.javascriptworld.com/index.html , 那么 我 们 只 需要 index ), 所 以 我 们 创建 startMenu 
和 stopMenu 变量 ,并且 将 它们 设置 为 this.href 中 的 两 个 位 置 ， 我 们 将 根据 这 两 个 位 置 找到 组 成 菜单 
名 的 字符 串 。 
4. var thisMenuName = this.href.substring(startMenu, stopMenu) ; 
我 们 需要 的 菜单 名 在 这 两 个 位 置 之 间 ， 所 以 在 这 里 设置 它 。 
5. var thisMenuStyle = document.getElementById(thisMenuName).style; 
我 们 使 用 getElementById() 方 法 将 thisMenuStyle 变量 设置 为 所 需 菜单 的 style 属 1 
6. if (thisMenuStyle.display == "block") { 
thisMenuStyle.display = "none"; 
} 
else { 
thisMenuStyle.display = "block"; 
} 
如 果 thisMenuStyle 的 display 属性 是 block, 那 么 这 行 代码 将 它 设置 为 none。 或 者 如 果 它 是 none, 
就 把 它 改 为 block。 这 样 就 会 在 菜单 的 显示 状态 和 折 重 状态 之 间 进 行 切换 ， 见 图 12-1 和 图 12-2。 
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图 12-1 PRERADE 图 12-2 在 单 击 之 后 ,菜单 展开 ,额外 的 选择 出 现 了 














7. evt.preventDefault(); 

这 个 函数 的 最 后 ， 是 阻止 对 已 点 击 链接 的 任何 进一步 处 理 ， 用 上 面 这 条 语句 即 可 实现 。 

v 提示 

OQ 菜单 背后 的 原理 如 下 : 如 果 仔细 查看 HTML， 你 会 发 现 链接 其 实 是 在 cul> 和 <1i> 标 签 中 , 也 就 
是 说 , 它们 是 无 序列 表 和 列表 项 。 如 果 用 户 的 浏览 器 不 支持 CSS. 那么 他 们 只 会 在 网 页 上 看 到 
如 图 12-3 所 示 的 列表 。 而 如 果 浏 览 器 支持 CSS ， 我 们 就 可 以 使 用 CSS 来 为 链接 设置 样式 ， 使 
其 看 起 来 不 再 是 普通 列表 。 
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图 12-3 ”如 果 关 闭 CSS 显示 ， 那 么 菜单 就 会 显示 出 其 本 来 面目 


12.2 Jn TARE 

看 一 下 前 一 节 中 的 可 折 又 菜单， 你 可 能 会 认为 :“ 这 很 不 错 ， 但 我 想 要 的 其 实 是 下 拉 菜 单 ， 这 会 
让 网 页 看 起 来 像 应 用 程序 。” 其 实 ， 在 前 一 个 示例 和 下 拉 菜 单 之 间 并 没有 很 大 差异 。 实 际 上 ,HTML 
是 相同 的 (请 参考 脚本 12-1), CSS 见 脚本 12-4, JavaScript 见 脚本 12-5。 
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脚本 12-4 ”只 需 多 加 一 点 儿 CSS 和 JavaScript， 就 可 以 让 菜单 具有 更 传统 的 外 观 


body { 
background-color: #FFF; 
color: #000; 


} 

div { 
margin-bottom: 10px; 
width: 15em; 
background-color: #9CF; 

} 

ul.menu { 
display: none; 
list-style-type: none; 
margin: 0; 
padding: 0; 

} 


ul.menu li { 
font: 1em arial, helvetica, sans-serif; 
padding-left: 10px; 


a.menuLink, li a ( 
text-decoration: none; 
color: #006; 


} 


a.menuLink { 
font-size: 1.2em; 
font-weight: bold; 
} 


ul.menu li a:hover { 
background-color: #006; 
color: #FFF; 
padding-right: 10px; 





脚本 12-5 iS UAE FRY BEEN Pe At 


window. addEventListener("load", initAl1, false); 


function initAll() { 
var allLinks = document.getElementsByTagName("a") ; 


for (var i=0; i«alllinks.length; i++) { 
if (allLinks[i].className.indexOf("menuLink") > -1) { 
allLinks[i] .addEventListener("mouseover", toggleMenu, false); 
allLinks[i].addEventListener("click",clickHandler, false); 
} 
} 
} 


function clickHandler(evt) { 
evt.preventDefault(); 
) 
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function toggleMenu() { 
var startMenu = this.href.lastIndexOf("/")«1; 
var stopMenu = this.href.lastIndexOf("."); 
var thisMenuName = this.href.substring(startMenu, stopMenu) ; 


var menuParent = document.getElementById(thisMenuName) .parentNode; 
var thisMenuStyle = document.getElementById(thisMenuName).style; 
thisMenuStyle.display = "block"; 


menuParent.addEventListener("mouseout",function() {thisMenuStyle.display = "none";},false); 
menuParent.addEventListener("mouseover",function() (thisMenuStyle.display = "block";},false) ; 


} 


=> 添加 下 拉 菜 单 








1. allLinks[i].addEventListener("mouseover",toggleMenu, false); 
allLinks[i].addEventListener("click",clickHandler, false); 
在 这 里 ， 并 不 像 前 面 那样 添加 click 处 理 程序 来 调用 topgleMenu(), Miik click 调用 
clickHandler()。 我 们 将 让 onmouseover 调用 toggleMenu(), 这 意味 着 当 用 户 将 鼠标 移动 到 这 个 链接 上 
时 ， 菜 单 就 会 展开 ( 见 图 12-4 )。 
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图 12-4 ” 当 把 鼠标 移动 到 链接 上 时 ， 菜单 就 会 展开 ， 并 且 突 出 显示 鼠标 指针 下 的 选项 











2. function clickHandler(evt) { 
evt.preventDefault(); 
} 
clickHandler() 函 数 只 需要 确保 不 会 对 被 单 击 的 链接 进行 进一步 的 处 理 。 


3. var menuParent = i a eel etn ns 





var thisMenuStyle = document.getElementById(thisMenuName).style; 
thisMenuStyle.display = "block"; 

让 菜单 显示 之 后 ， 必 须知 道 什 么 时 候 应 该 让 它 消失 。 下 拉 菜 单 的 特点 是 ， 当 鼠标 离开 触发 菜单 的 
链接 时 ， 并 不 希望 关闭 菜单 ， 只 有 在 鼠标 离开 整个 div 时 ， 才 应 该 关闭 菜单 。 也 就 是 说 ， 如 果 和 鼠标 还 
在 菜单 上 的 任何 位 置 , 它 就 应 该 打开 着 .为 此 ,我 们 需要 菜单 名 称 节点 的 父 节点 ,将 其 存储 在 menuparent 
变量 中 。 

最 后 ， 我 们 不 再 想 以 同样 的 方式 切换 菜单 ， 而 要 将 菜单 设置 为 一 直 显 示 。 
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4. menuParent.addEventListener("mouseout",function() {thisMenuStyle.display = "none";}, false); 
有 一 个 技巧 : 如 果 执 行 到 这 里 ， 那 么 根据 定义 ， 鼠 标 指 针 应 该 已 经 在 div 中 了 。 因 此 ， 只 需 设置 
4 div 的 mouseover 事件 处 理 程序 ， 就 会 马上 触发 它 。 
5. menuParent.addEventListener("mouseover",function() {thisMenuStyle.display = "block";], 
false); 
这 里 让 整个 div (FRR) 显示 。 的 确 ， 我 们 在 步骤 3 中 已 经 这 样 做 了 ， 但 是 我 们 需要 在 这 里 再 做 
一 次 ， 否 则 当 和 鼠标 离开 链接 时 ， 菜 单 就 会 关闭 。 


12.8 ”改进 下 拉 菜 单 


看 到 前 一 个 示例 之 后 , 你 可 能 会 说 ,“ 我 不 想 要 重 直 的 菜单 , 我 要 一 个 水 平 菜 单 !” 这 非常 简单 (其 
至 不 需要 修改 JavaScript )! 你 还 可 能 希望 给 习惯 使 用 键盘 进行 导航 的 用 户 提供 一 些 方 便 。 下 面 就 看 看 
如 何 实 现 这 些 需 求 。 同 样 ， 不 需要 修改 HTML， 如 果 想 看 HTML， 翻 回去 看 脚本 12-1 就 可 以 了 。 
脚本 12-6 只 需 在 CSS 中 添加 一 行 ， 菜单 的 外 观 就 完全 不 一 样 了 

body { 


background-color: #FFF; 
color: #000; 
























































div { 
margin-bottom: 10px; 
width: 15em; 
background-color: #9CF; 
float: left; 

} 


ul.menu { 
display: none; 
list-style-type: none; 
margin: 0; 
padding: 0; 


ul.menu li { 
font: 1em arial, helvetica, sans-serif; 
padding-left: 10px; 


a.menuLink, li a ( 
text-decoration: none; 
color: #006; 


} 


a.menuLink { 
font-size: 1.2em; 
font-weight: bold; 
} 


ul.menu li a:hover { 
background-color: #006; 
color: #FFF; 
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padding-right: 10px; 


Ki 


脚本 12-7 添加 一 点 儿 JavaScript 代码 ， 让 用 户 不 用 鼠标 也 能 够 操作 这 个 菜单 


window.addEventListener("1oad" ,initAl1,false); 


function initAll() { 
var allLinks = document.getElementsByTagName("a"); 


for (var i=0; i«alllinks.length; i++) ( 
if (allLinks[i].className.indexOf("menuLink") > -1) ( 
alllinks[i].addEventListener("mouseover" , toggleMenu, false); 
allLinks[i].addEventListener("click",clickHandler, false); 


} 
} 
} 
function clickHandler(evt) { 
if (evt) { 
evt.preventDefault(); 
if (typeof evt.target == "string") { 
toggleMenu(evt, evt.target) ; 
else { 
toggleMenu(evt,evt.target.toString()); 
else ( 
toggleMenu(evt,window.event.srcElement.href); 
} 


function toggleMenu(evt,currMenu) { 
if (toggleMenu.arguments.length < 2) { 
var currMenu = this.href; 
} 


var startMenu = currMenu.lastIndexOf("/")41; 
var stopMenu = currMenu.lastIndexOf("."); 
var thisMenuName = currMenu.substring(startMenu, stopMenu) ; 


var menuParent = document.getElementById(thisMenuName).parentNode; 
var thisMenuStyle = document.getElementById(thisMenuName).style; 
thisMenuStyle.display = "block"; 


menuParent.addEventListener("mouseout",function() {thisMenuStyle.display = "none";}, false); 
menuParent.addEventListener("mouseover",function() {thisMenuStyle.display = "block";}, false); 
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Seaevpewwy Plays 








4] & s dropbonsserconen.com G] CHJ 
Shakespeare's Plays 
Tragedies Histories 
All's Well That Ends Well 
As You Like It 
Love's Labour's Lost 














图 12-5 对 CSS 的 一 个 简单 修改 就 使 菜单 横 跨 页 面 ， 而 不 是 在 左边 垂直 排列 
> 改进 下 拉 莱 单 


1. float: left; 





























很 简单 ， 只 需 在 每 个 菜单 div 的 CSS 中 添加 float :left; ， 见 脚本 12-6 和 图 12-5。 这 样 就 可 以 把 
垂直 菜单 转换 为 水 平 菜 单 ， 不 需要 修改 JavaScript. 

2. allLinks[i].addEventListener("click",clickHandler, false); 

但 是 ， 如 果 希 望 使 菜单 的 可 操作 性 更 强 ， 就 需要 添加 一 点 儿 JavaScript 代码 ， 见 脚本 12-7. EAE 
地 说 ， 需 要 在 click 事件 处 理 程序 中 添加 代码 ， 所 以 把 它 设 置 为 函数 clickHandler。 

3. function clickHandler(evt) { 


这 是 事件 处 理 程序 ， 传 递 的 是 evt 参数 。 正 如 前 几 个 示例 中 提 到 的 ， 有 些 浏览 器 传递 事件 对 象 ， 
有 些 不 传递 。 


4. if (evt) { 
evt.preventDefault(); 














if (typeof evt.target -- "string") ( 
toggleMenu(evt,evt.target); 


else { 
toggleMenu(evt,evt.target.toString()); 





else ( 
toggleMenu(evt,window.event.srcElement.href); 


这 些 代码 处 理 浏 览 器 在 事件 传递 机 制 方面 的 差异 。 首 先 ， 检查 是 否 有 事件 对 象 ， 也 就 是 evt 是 否 
存在 。 如 果 有 事件 对 象 存在 , 就 检查 它 的 target 属性 是 否 是 一 个 字符 串 ， 因 为 我 们 需要 字符 串 形式 的 
目标 。 如 果 它 是 字符 串 ， 就 把 事件 和 它 的 目标 传递 给 toggleMenu()。 

如 果 target 属性 不 是 字符 串 , 就 通过 调用 toString() 方 法 把 它 转换 为 字符 串 , 然后 使 用 这 个 字符 
tB. (和 evt ) 作为 toggleMenu() 的 参数 。 


最 后 ,如 果 没 有 事件 对 象 ,就 向 toggleMenu() 传 递 一 个 伪 evt 对 象 和 window.event .srcElement . href 
是 正 存储 我 们 需要 的 值 的 位 置 )。 
5. function toggleMenu(evt,currMenu) { 


if (toggleMenu.arguments.length < 2) { 
var currMenu = this.href; 












































( 


- 





} 
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段 代 码 负 We a. 因为 单 击 和 鼠标 移动 都 可 以 触发 菜单 的 显示 ， 所 以 
"mode 比较 复杂 。 这 个 函数 有 两 个 参数 , 但 是 JavaScript 的 函数 有 一 个 重要 的 特点 : 即使 函数 期 
望 传递 两 个 参数 ， 也 3 Msg 须 传 递 两 个 参数 。 实 际 上 ， 由 于 我 们 编写 toggleMenu() 的 方式 , € 
可 以 应 对 3 种 情况 。 

口 当 浏览 器 是 IE 并 通过 鼠标 触发 toggleMenu() 时 ， 不 传递 参数 。 
口 当 浏 览 器 不 是 IE 并 通过 鼠标 触发 toggleMenu() 时 ， 传 递 一 个 参数 (event 对 象 )。 
O 当 通 过 clickHandler() 调 用 toggleMenu() 时 ， 传 递 两 个 参数 (event 对 象 和 菜单 名 )。 

如 果 不 传 递 参 数 或 只 传递 一 个 参数 ( 可 以 通过 查看 toggleMenu.arguments.length 来 检查 )， 就 说 
明 可 以 通过 this.href 找到 菜单 名 ， 换 句 话说， 应 该 采用 与 以 前 一 样 的 方式 。 但 是 ， 因 为 需要 这 个 值 
在 currMenu 中 ， 所 以 要 存储 它 。 


6. var startMenu = currMenu.lastIndexOf("/")41; 
var stopMenu = currMenu.lastIndexOf("."); 
var thisMenuName = currMenu.substring(startMenu, stopMenu) ; 


同样 ， 要 计算 startMenu, stopMenu 和 thisMenuName， 但 是 这 一 次 是 根据 currMenu 进行 计算 。 

VV 提示 

口 Se op ANE fre ARE ABER, iu EL ep Visas (比如 
移动 设备 中 的 浏览 器 ) 无 法 按照 菜单 需要 的 方式 处 理 鼠 标 移 动 。 考 虑 可 访问 性 总 是 好 想法 , 使 
用 JavaScript 或 新 奇 的 特性 不 应 该 成 为 忽视 各 种 用 户 的 特殊 需要 的 借口 。 

口 在 这 个 示例 中 ， 在 菜单 项 上 敲 击 键盘 会 展开 菜单 ， 但 是 关闭 菜单 需要 使 用 鼠标 。 


12.4” 带 说 明 的 幻灯 片 


尽管 像 脚本 4-18 和 脚本 4-19 那样 的 幻灯 片 很 方便 ， 但 是 如 果 可 以 显示 随 图 像 改 变 的 说 明 ， 就 更 
好 了 。 脚 本 12-8 (HTML )、 脚 本 12-9 (CSS ) 和 脚本 12-10 (JavaScript ) 给 出 一 个 这 样 的 幻灯 片 示 例 
(显示 的 是 我 们 夏天 度假 时 拍 的 照片 )。 在 这 个 示例 中 ,我 们 将 演示 如 何 将 前 面 见 过 的 不 同 技术 组 合 在 
一 个 脚本 中 。 


脚本 12-8 约 灯 片 HTML 页 面 


<!DOCTYPE html» 
<html> 
<head> 
<title>Our Summer Vacation!</title> 
<link rel="stylesheet" href="script04.css"> 
<script src="script04.js"></script> 
</head> 
<body> 
<h1>0ur Summer Vacation Slideshow</h1> 
<img src="images/slideImgO. jpg" alt-"Our Vacation Pix" id="slideshow"> 
<div id="imgText"> </div> 
<form id="chgImg"> 
<input type="button" id="prevLink" value="&laquo; Previous"> 
<input type="button" id="nextLink" value="Next &raquo;"> 
</form> 
</body> 
</html> 
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脚本 12-9 脚本 12-8 调用 的 外 部 CSS 


body { 
background-color: #FFF; 
color: #000; 
font: 12px verdana, arial, helvetica, geneva, sans-serif; 


} 
ha { 
font: 24px "trebuchet ms", verdana, arial, helvetica, geneva, sans-serif; 
margin-left: 100px; 
} 
#chgImg { 
margin-left: 100px; 
clear: both; 
} 


#slideshow { 
padding: 0 10px 10px 10px; 
float: left; 
height: 240px; 
width: 320px; 
} 


#imgText { 
padding: 10px 0 0 10px; 
float: left; 
width: 200px; 
height: 150px; 
border-top: 1px solid #000; 
border-left: 1px solid #000; 


} 
脚本 12-10 AZIK AAAS zs BR A 


window. addEventListener("load", initAl1, false); 


var currImg = 0; 
var captionText = [ 
"Our ship, leaving Vancouver.", 
"We took a helicopter ride at our first port, Juneau.", 
"The helicopter took us to Mendenhall Glacier.", 
"The happy (and chilly) couple, on the glacier.", 
"Here's what our second stop, Ketchikan, looked like from the ship.", 
"We got to cruise through Glacier Bay. It was absolutely breathtaking!", 
"In Skagway, we took a train up into the mountains, all the way to the Canadian Border.", 
"Looking back down at Skagway from the train.", 
"On a trip this romantic, I shouldn't have been surprised by a proposal, but I was (obviously, 
>I said yes).", 
"It's nice to go on vacation, but it's nice to be home again, too." 





l; 


function initAll() { 
document.getElementById("imgText").innerHTML = captionText[currImg]; 
document. getElementById("prevLink").addEventListener("click",function() {newSlide(-1);}, false); 
document.getElementById("nextLink").addEventListener("click",function() {newSlide(1);}, false); 
} 


function newSlide(direction) { 
var imgCt = captionText. length; 
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currImg = currImg + direction; 
if (currImg « 0) { 
currImg = imgCt-1; 


if (currImg == imgCt) { 

currImg = 0; 
document. getElementById("slideshow").src = "images/slideImg" + currImg + " 
document. getElementById("imgText").innerHTML = captionText[currImg]; 


.jpg ; 
} 


> 创建 带 说 明 的 幻灯 片 








1. document.getElementById("imgText").innerHTML = captionText[currImg]; 
initAl1() 函 数 需要 设置 3 个 东西 : 第 一 张 幻 灯 片 的 照片 说 明 ( 放 在 imgText 区 域 中 )， 以 及 前 进 
和 后 退 按钮 的 click 处 理 程序 ( 见 下 面 的 步骤 )。 
2. document .getElementById("pTrevLink") .addEventListener("click", function(){newSlide(-1);}, 
false); 
document .getElementById("nextLink").addEventListener("click", function(){newSlide(1) ;}, 
false); 
RUBLE TBR 数 的 全 部 ( 至 少 是 大 部 分 ) 操作 。 我 们 可 以 建立 复杂 的 代码 ， 根 据 单 击 的 按钮 决 
定 是 前 进 还 是 后 退 。 但 是 不 需要 这 么 做 ， 只 需 建立 两 个 都 调用 newslide() 的 函数 。 这 两 个 函数 调用 的 
区 别 是 : 一 个 调用 传递 1， 另 一 个 调用 传递 -1 ， 这 个 参数 让 newSlide() 知 道 移动 的 方向 。 


3. document.getElementById("slideshow").src = "images/slideImg" + currImg + ".jpg"; 





document .getElementById("imgText").innexHTML = captionText[currImg]; 
这 个 步 又 同时 改变 图 像 和 对 应 的 说 明 ， 图 12-6 显示 其 结 
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图 12-6 ”这 个 脚本 决定 要 显示 的 照片 和 说 明 
V 提示 
O 对 captionText 及 其 语法 感到 疑惑 吗 ? 回忆 一 下 之 前 我 们 说 过 的 : 条 条 大 路 通 罗 马 ， 在 JavaScript 
中 , 声明 新 数组 的 方法 不 止 一 种 , 这 一 点 儿 都 不 奇怪 。 下 面 两 种 声明 方式 的 结果 是 一 模 一 样 的 : 


var dice = new Array(1,2,3,4,5,6); 
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和 
var dice = [1,2,3,4,5,6]; 


两 种 方法 都 可 以 生成 一 个 包含 六 面 山 子 可 选 值 的 数组 。 


12.5 一 个 娱乐 姓名 生成 器 


你 以 前 可 能 见 过 一 些 娱乐 性 的 Web 程序 , 它们 接受 你 的 姓名 并 且 将 它 转换 为 一 个 新 姓名 , 比如 超 
级 英雄 的 姓名 或 《黑道 MH dc) ( The Sopranos ) $ EA EEZ., RAIER ERAR, Tr Wait 
脚本 12-11 和 脚本 12-12 演示 如 何 生 成 这 种 傻乎乎 的 姓名 。 在 这 个 过 程 中 ， 你 会 看 到 如 何 将 字符 串 处 
理 、 数 组 、 错 误 检 查 和 表单 验证 组 合成 一 个 无 聊 的 脚本 。 


脚本 12-11 可 以 在 这 个 网 页 中 输入 你 的 真实 姓名 ， 然 后 就 会 得 到 娱乐 姓名 


<!DOCTYPE html» 
<html> 
<head> 
<title>Silly Name Generator</title> 
<script src="script05.js"></script> 
</head> 
<body> 
«hi»What's your silly name?</h1> 
«table» 
<tr> 
<td class="rtAlign">First Name:</td> 
<td><input type="text" id="fName" size="30"></td> 
</tr> 
<tr> 
<td class="rtAlign">Last Name:</td> 
<td><input type="text" id-"lName" size="30"></td> 
</tr> 
<tr> 
<td> </td> 
<td><input type="submit" value="Submit" id="sillySubmit"></td> 
</tr> 
</table> 
<p id="msgField">&nbsp; </p> 
</body> 
</html> 


脚本 12-12 ”这 个 脚本 根据 用 户 输入 的 名 和 姓 中 的 字符 ， 从 三 个 数组 生成 娱乐 姓名 


window.addEventListener("load",initAll, false); 



































function initAll() { 
document .getElementById("sillySubmit").addEventListener( 

"click", 

function() ( 
document.getElementById("msgField").innerHTML - getSillyName(); 
return false; 

b 

false 


); 
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function getSillyName() { 

var firstName = ["Runny", "Buttercup","Dinky", "Stinky", "Crusty", "Greasy","Gidget", "Cheesypoof", 
"Lumpy","Wacky", "Tiny", "Flunky", "Fluffy","Zippy", "Doofus", "Gobsmacked","Slimy", "Grimy", 
"Salamander","Oily", "Burrito", "Bumpy", "Loopy","Snotty", "Irving", "Egbert"]; 

var lastNamei - ["Snicker", "Buffalo","Gross", "Bubble", "Sheep", "Corset","Toilet", "Lizard", 
"Waffle","Kumquat", "Burger", "Chimp", "Liver","Gorilla", "Rhino", "Emu", "Pizza","Toad", 
"Gerbil", "Pickle", "Tofu","Chicken", "Potato", "Hamster","Lemur", "Vermin"]; 

var lastName2 = ["face", "dip", "nose","brain", "head", "breath", "pants","shorts", "lips", 
"mouth", "muffin","butt", "bottom", "elbow", "honker","toes", "buns", "spew", "kisser","fanny", 


"squirt", "chunks", "brains","wit", "juice", "shower"]; 
var firstNm = document.getElementById("fName") . value.toUpperCase(); 


var lastNm - document.getElementById("lName").value.toUpperCase(); 
var validName - true; 


if (firstNm == "") ( 
validName - false; 


else { 
var firstNum 
if (firstNum 
validName 


} 


firstNm.charCodeAt(0) - 65; 
0 || firstNum > 25) { 
false; 


Wo^ gg 


) 


if (!validName) ( 
document.getElementById("fName").focus(); 
document.getElementById("fName").select(); 
return "That's not a valid first name"; 


} 
if (lastNm == "") { 
validName = false; 
else { 
var lastNum1 = lastNm.charCodeAt(0) - 65; 
var lastNum2 = lastNm.charCodeAt(lastNm.length-1) - 65; 
if (lastNum1 < 0 || lastNum1 > 25 || lastNum2 < O || lastNum2 > 25) { 
validName = false; 
} 
} 


if (!validName) { 
document.getElementById("lName").focus(); 
document.getElementById("lName").select(); 
return "That's not a valid last name"; 


} 


return "Your silly name is 
[lastNum2]; 


+ firstName [firstNum] + + lastName1[lastNum1] + lastName2 


} 


=> 28& JavaScript 技术 








1. document.getElementById("msgField").innerHTML = getSillyName(); 
return false; 

当 最 初 加 载 页 面 时 , 将 submit 按钮 的 click 处 理 程序 设置 为 调用 一 个 函数 ,这 里 是 这 个 函数 的 内 

容 。 首先 , 调用 getSsillyName()。 这 个 函数 返回 一 个 字符 串 值 (要么 是 娱乐 名 , 要 么 是 一 个 错误 消息 )， 

















NI 
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我 们 会 把 这 个 字符 串 写 到 页 面 上 。 然 后 返回 false， 这 样 click 就 不 会 尝试 将 表单 提交 到 服务 器 。 
2. var firstNm = document.getElementById("fName").value.toUpperCase(); 





var lastNm = document.getElementById("1Name").value.toUpperCase(); 
页 面 要 求 每 个 访问 者 在 文本 字段 中 输入 他 们 的 名 字 和 姓氏 。 当 提交 表单 时 ， 在 getSillyName() FR 
数 中 ， 首 先 将 名 字 和 姓氏 转换 为 全 大 写 ， 并 且 将 结果 存储 在 变量 firstNm 和 lastNm 中 。 
3. if (firstNm = ="") { 
validName = false; 
} 
页 面 要 求 访 问 者 第 一 次 在 名 字 字 段 中 至 少 输 入 一 个 字符 ， 所 以 在 这 里 进行 检查 。 请 记 住 ， 这 个 表 
达 式 的 意义 是 “如 果 firstNnm 为 空 ， 那 么 ……”。 如 果 是 这 种 情况 ， 就 将 validName 设置 为 false。 
4. var firstNum = firstNm.charCodeAt(0) - 65; 
否则 ，charCodeAt() 方 法 从 字符 串 中 取出 一 个 字符 。 这 个 字符 的 位 置 取决 于 传递 给 方法 的 数字 参 
数 。 在 这 个 示例 中 ， 取 出 0 位 置 上 的 字符 ， 也 就 是 字符 串 中 的 第 一 个 字符 ( 请 记 住 ，JavaScript 从 0 
开始 编号 )， 并 且 返 回 这 个 字符 的 ASCI 值 。 大 写字 母 A 的 ASCII 值 为 65, Z 的 ASCII 值 为 90。 所 
以 将 返回 值 减 65 应 该 获得 0 ~ 25 的 值 ， 将 结果 保存 在 firstNum 中 。 
5.if (firstNum < 0 || firstNum > 25) { 
validName = false; 
} 
如 果 用 户 输入 的 名 字 并 非 以 A~Z 的 字符 开头 ， 那 么 就 没有 对 应 的 娱乐 名 。 所 以 ， 在 检查 姓氏 之 
前 ， 要 确保 首 字 母 处 于 这 个 范围 中 。 如 果 不 满足 这 个 条 件 ， 就 将 validName 设置 为 false。 
6. if (!validName) { 
document . getElementById("fName").focus(); 
document .getElementById("fName").select(); 
return "That's not a valid first name"; 
) 
在 这 里 检查 validName, "E validName 是 false， 就 意味 着 用 户 输入 的 名 字 是 无 效 的 。 当 发 4 
这 种 情况 时 ， 我 们 将 输入 光标 放 进 这 个 字段 ， 选 择 这 个 字段 中 的 所 有 内 容 ， 并 且 返 回 上 一 个 错误 
7.if (lastNm == "") { 
validName = false; 
} 
与 名 字 一 样 ， 访 问 者 必须 在 姓氏 字段 中 输入 一 些 内 容 。 
8. var lastNum1 = lastNm.charCodeAt(O) - 65; 
var lastNum2 = lastNm.charCodeAt(lastNm.length-1) - 65; 
为 了 找到 访问 者 的 娱乐 姓氏 , 需要 找到 姓氏 的 第 一 个 字符 和 最 后 一 个 字符 的 ASCII 值 。 第 一 个 字 
符 的 处 理 与 步骤 4 中 相似 。 最 后 一 个 字符 是 通过 lastim 字符 串 的 长 度 减 1， 然 后 将 这 个 数字 传递 给 
charCodeAt() 方 法 找到 的 。 
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9. if (lastNum1 < 0 || lastNumi > 25 || lastNum2 < 0 || lastNum2 > 25) { 
validName = false; 


J 


与 名 字 字 段 一 样 ， 必 须 确 保 姓氏 的 第 一 个 字符 和 最 后 一 个 字符 包含 A ~ Z 的 字符 ; 如 果 不 满足 条 
就 将 validName 再 次 设置 为 false。 


10. if (!validName) { 




















件 

















document . getElementById("lName").focus(); 
document . getElementById("lName").select(); 
return "That's not a valid last name"; 

















) 

与 第 6 步 中 一 样 ， 如 果 姓 氏 是 无 效 的 ， 就 向 用 户 显 示 错 误 消 息 。 

11. return "Your silly name is " + firstName[firstNum] + " " + lastNamei[lastNum1] + 
>lastName2[lastNum2 ] ; 





如 果 通 过 了 所 有 测试 ， 就 要 计算 这 个 新 的 娱乐 名 了 。 因 为 已 经 将 字符 转换 为 0~ 25 的 数字 ， 所 以 
可 以 将 结果 用 作 firstName, lastName1 和 lastName2 数组 的 索引 。 将 每 个 数组 查找 的 结果 依次 拼接 起 
X, 并 且 在 名 字 和 姓氏 之 间 加 一 个 空格 。 注意 , 姓氏 的 两 部 分 是 直接 拼接 的 , 没有 加 空格 。 完 成 之 后 ， 
将 这 个 姓名 返回 并 放 进 文档 中 ， 见 图 12-7。 























Sor) 
eo © nttps.//didropbo.. O ~ @ C 


C || S Silly Name Generator 
What's your silly name? 


First Name: [Nancy 








Last Name: |Peterson 





Submit | 


Your silly name is Zippy Emuelbow 














图 12-7 产生 的 娱乐 名 


娱乐 名 
寻找 娱乐 名 的 方法 是 ， 获 得 名 字 的 第 一 个 字母 、 姓 氏 的 第 一 个 字母 和 姓氏 的 最 后 一 个 字母 ， 然 
后 在 表 12-1 中 查找 它们 。 通 过 名 字 的 第 一 个 字母 找到 新 的 名 字 ， 通 过 姓氏 的 头 尾 字母 找到 新 姓氏 
的 两 个 部 分 。 


例如 ，Tom 中 的 工 对 应 于 新 名 字 Oily, Negrino P49 N fe O 产生 新 姓氏 Gorillahonker。Dori 


中 的 D 转换 为 Stinky, Smith 中 的 S 和 H 转换 为 Gerbilshorts。 因 此 ， 本 书 作者 的 娱乐 名 是 Oily 
Gorillahonker 和 Stinky Gerbilshorts. 
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表 12-1 娱乐 名 表 








名 字 的 第 一 个 字母 姓氏 的 第 一 个 字母 姓氏 的 最 后 一 个 字母 

A Runny Snicker face 

B Buttercup Buffalo dip 

C Dinky Gross nose 

D Stinky Bubble brain 

E Crusty Sheep head 

F Greasy Corset breath 
G Gidget Toilet pants 
H Cheesypoof Lizard shorts 

I Lumpy Waffle lips 

J Wacky Kumquat mouth 
K Tiny Burger muffin 
L Flunky Chimp butt 

M Fluffy Liver bottom 
N Zippy Gorilla elbow 
O Doofus Rhino honker 
P Gobsmacked Emu toes 

Q Slimy Pizza buns 

R Grimy Toad spew 

S Salamander Gerbil kisser 
T Oily Pickle fanny 
U Burrito Tofu squirt 
V Bumpy Chicken chunks 
W Loopy Potato brains 
X Snotty Hamster wit 

Y Irving Lemur juice 

Z Egbert Vermin shower 


12.6 ”柱状 图 生成 器 


图 表 是 显示 可 视 信息 的 好 方法 。 可 以 在 Adobe Photoshop 中 绘制 柱状 图 ， 或 者 在 Microsoft Excel 
中 计算 它们 ， 但 是 对 于 可 能 需要 定期 更 新 的 动态 数据 ， 为 什么 不 用 JavaScript 实时 地 生成 它们 呢 ? 我 
们 在 本 书 中 一 直 在 说 JavaScript 是 面向 对 象 的 ， 而 且 在 本 书 中 许多 地 方 都 使 用 了 对 象 ， 但 是 只 简要 地 
解释 了 如 何 创建 自己 的 自 定义 对 象 。 下 面 这 个 示例 更 深入 地 演示 对 象 的 工作 方式 ， 见 脚本 12-13 
(HTML )、 脚 本 12-14 (CSS ) 和 脚本 12-15 (JavaScript )。 
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脚本 12-13 ”柱状 图 生成 器 的 HTML 页 面 


<!DOCTYPE html» 

<html> 

<head> 
<title>Bar Chart Display</title> 
<link rel="stylesheet" href="script06.css"> 
<script src="script06.js"></script> 

</head> 

<body> 

«div id-"chartType"» 
Choose a chart:«br» 
<input type="radio" name-"type" value-"browser" checked»Browser Usage<br> 
«input type-"radio" name-"type" value-"platform"» Mobile Device Vendors«br» 
<p><br></p> 
Choose a color:<br> 
<input type="radio" name-"color" value-"lilRed.gif" checked» Red<br> 
<input type="radio" name-"color" value-"lilGreen.gif"» Green<br> 
<input type="radio" name-"color" value-"lilBlue.gif"» Blue<br> 
<p><br></p> 
Choose a direction:<br> 
<input type="radio" name-"direction" value-"horizontal" checked» Horizontal<br> 
<input type="radio" name-"direction" value-"vertical"» Vertical 





</div> 
<div id="chartArea"> </div> 
</body> 
</html> 
脚本 12-14 ”这 个 脚本 包含 柱状 图 示例 的 样式 
body { 


background-color: #FFF; 
color: #000; 
font-size: 12px; 


} 


#chartType { 
float: left; 
width: 200px; 


} 
th { 
font-size: 16px; 
padding-left: 20px; 
padding-right: 15px; 
-horiz th { 
border-right: 1px #000 solid; 
} 
.horiz img { 
height: 15px; 
vertical-align: bottom; 
margin-right: 10px; 
} 
.vert { 


text-align: center; 
vertical-align: bottom; 
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} 
.vert th { 
border-left: 1px #000 solid; 
border-bottom: 1px #000 solid; 
} 
.vert img { 
width: 15px; 
padding-left: 10px; 
padding-right: 10px; 
margin-top: 10px; 
} 





脚本 12-15 ”这 是 绘制 柱状 图 的 代码 
window. addEventListener("load", initAl1, false); 


function initAll() { 
var radioButtons = document.getElementsByTagName("input"); 


for (var i=0; i<radioButtons.length;i++) { 
if (radioButtons[i].type == "radio") ( 
radioButtons[i].addEventListener("click", chgChart, false); 
} 


} 
chgChart(); 


function chgChart() { 
var bChart = { 
name: "Desktop browser usage by year", 
years: [2010,2011,2012,2013,2014], 
fieldnames: ["MS IE","Firefox","Chrome"], 
fields: [ 
[51.45,42.93,33.74,29.25,24.5], 
[31.27,28.2,24.15,20.82,20.53], 
[10.25,21.08,33.23,42.63,46.6] 
] 
} 


var mobiChart = { 

name: "Mobile device vendors by year", 

years: [2010,2011,2012,2013, 2014], 

fieldnames: ["Nokia", "Apple", "Samsung", "RIM"], 

fields: [ 
[36.93,38.44,29.27,21.4,17.6], 
[28.88,27.51,24.39,24.01,23.23], 
[4.5,11,18.96,25.47,29.39], 
[19.78,14.38,5.22,3.65,2.87] 





] 
} 


var radioButtons = document.getElementsByTagName("input") ; 
var currDirection = getButton("direction") ; 
var imgSrc = "images/" + getButton("color"); 


if (getButton("type")=="browser") { 
var thisChart = bChart; 


} 
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else { 
var thisChart = mobiChart; 
} 


var chartBody = "<h2>"+thisChart.name+"</h2><table>"; 


for (var i=0; i<thisChart.years.length;i++) { 
if (currDirection == "horizontal") { 
chartBody += "<tr class="horiz'><th rowspan="+(thisChart.fieldnames.length+1) ; 
chartBody += ">"+thisChart.years[i]+"</th><td colspan=2></td></tr>"; 
for (var j-0; j«thisChart.fieldnames.length; j++) { 
chartBody += "<tr class='horiz'><td>"+thisChart.fieldnames[j]; 
chartBody += "</td><td><img alt-'horiz bar' src='"+imgSrc; 
chartBody += "' width="+thisChart.fields[j][i]*3+">"; 
chartBody += thisChart.fields[j][i]+"</td></tr>"; 
} 


} 
else { 
chartBody += "<tr class='vert'><th rowspan=2>"+thisChart.years[i]+"</th>"; 
for (var j=0; j<thisChart.fieldnames.length; j++) { 
chartBody += "<td><img alt='vert bar' src-'"4imgSrc; 
chartBody += "' height="+thisChart.fields[j][i]*3+"'></td>"; 
chartBody += "</tr><tr class='vert'>"; 
for (j=0; j<thisChart.fieldnames.length; j++) { 
chartBody += "<td>"+thisChart. fields[j][i]+"<br>"; 
chartBody += thisChart.fieldnames[j]+"</td>"; 


chartBody += "</tr>"; 
} 
} 


chartBody += "</table>"; 
document. getElementById("chartArea").innerHTML = chartBody; 


function getButton(buttonSet) { 
for (var i=0; i<radioButtons.length;i++) { 
if (radioButtons[i].name == buttonSet 8& radioButtons[i].checked) { 
return radioButtons[i].value; 


} 
} 
return -1; 


} 
} 


> 生成 柱状 图 


1. var radioButtons = document.getElementsByTagName("input") ; 








for (var i=0; i«radioButtons.length; i++) { 
if (radioButtons[i].type == "radio") { 
radioButtons[i].addEventListener("click", chgChart, false); 
} 


} 
chgChart(); 


首先 执行 initAl1() 函 数 。 在 这 里 ， 我 们 获得 所 有 单 选 按钮 并 且 遍 历 它们 ， 将 它们 设置 为 在 单 击 
时 调用 chgChart()。 在 此 之 后 ， 手 动 调用 chgChart() 来 显示 页 面 的 默认 视图 。 
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2.var bChart = { 

在 chgChart() 中 ， 我 们 创建 了 第 一 个 自 定义 对 象 bChart[browser chart (浏览 器 图 表 ) 的 缩写 ]。 创 
建 对 象 就 是 这 么 简单 。 

3. name: "Desktop browser usage by year", 

years: [2010,2011,2012,2013,2014], 
fieldnames: ["MS IE","Firefox", "Chrome" ], 
fields: [ 
[51.45,42.93,33.74,29.25,24.5], 
[31.27,28.2,24.15,20.82,20.53], 
[10.25,21.08,33.23,42.63,46.6] 
] 

这 里 创建 自 定义 对 象 的 属性 ， 并 日 通过 赋值 对 它们 进行 初始 化 。 在 这 里 ， 我 们 建立 了 bChart 的 
name, years, fieldnames 和 fields 属性 。 这 些 字段 分 别 是 图 表 的 名 称 、 图 表 涉 及 的 年 份 、 图 表 值 的 3 
个 标签 以 及 每 个 年 份 和 每 个 标签 的 值 域 (在 这 个 示例 中 ， 分别 表示 一 种 浏览 器 )。 

注意 , 在 每 个 属性 前 面 没 有 使 用 var 关键 字 , 这 是 因为 它们 不 是 新 变量 , 而 是 在 一 个 现 有 变量 ( B 
刚才 创建 的 对 象 ) 中 添加 的 新 属性 。 

新 属性 fields 之 所 以 使 用 两 层 方 括号 ,是 因为 它 是 一 个 二 维 数组 。 我 们 可 以 用 bchart.fields[o][n] 
引用 第 一 行 ， 用 bchart.fields[1][n] 引 用 第 二 行 ， 用 bchart.fields[2][n] 引 用 第 三 行 。 

4.) 

闭 花 括号 表示 完成 创建 bChart 对 象 。 

5. var mobiChart = { 

name: "Mobile device vendors by year", 
years: [2010,2011,2012,2013,2014], 
fieldnames: ["Nokia","Apple","Samsung","RIM"], 
fields: [ 
[36.93,38.44,29.27,21.4,17.6], 
[28.88,27.51,24.39,24.01,23.23], 
[4.5,11,18.96,25.47,29.39], 
[19.78,14.38,5.22,3.65,2.87] 































































































] 
} 
现在 , 按照 创建 bChart 对 象 的 方式 , 创建 mobiChart[Mobile device chart ( 移动 设备 图 表 ) 的 缩写 ] 
对 象 并 且 分 配 它 的 属性 。 对 于 移动 设备 图 表 ， 也 需要 年 份 , 但 是 这 一 次 显示 的 数据 是 供应 商 市 场 份额 
的 百分比 。 


6. var radioButtons = document.getElementsByTagName("input") ; 
































var currDirection = getButton("direction") ; 
var imgSrc = "images/" + getButton("color"); 


在 绘制 图 表 之 前 ， 需 要 知道 用 户 选择 了 哪个 单 选 按钮 。radioButtons 数组 包含 页 面 上 的 所 有 输入 
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元 素 ， 获 得 这 个 数组 之 后 ， 就 可 以 调用 getButton() 函 数 。 将 一 个 字符 串 〈 单 选 按钮 集 的 名 称 ) 传递 
给 getButton() 函 数 ， 它 就 会 返回 一 个 字符 串 〈 这 个 单 选 按钮 集 的 当前 值 )。 
可 以 在 getButton() 中 建立 radioButtons 数组 ， 而 不 是 在 这 里 。 但 是 采用 现在 这 种 方式 ， 就 只 需 
要 对 它 进 行 一 次 初始 化 ， 而 不 是 三 次 〈 每 次 调用 getButton() 时 执行 一 次 初始 化 )。 
7. if (getButton("type")=="browser") { 
var thisChart = bChart; 
} 
else { 
var thisChart = mobiChart; 
} 
当 用 户 通 过 单 击 任何 单 选 按钮 来 改变 图 表 时 ， 调 用 chgChart() 函 数 。 当 发 生 这 种 情况 时 ， 如 果 需 
要 浏览 器 图 表 ， 那 么 将 整个 bChart 对 象 存 储 在 thisChart 中 。 和 否则 ， 就 要 显示 JavaScript 图 表 ， 所 以 
将 thisChart 赋值 为 mobiChart WA. 
8. var chartBody = "<h2>"+thisChart.name+"</h2><table>"; 
实际 的 绘制 代码 从 这 里 开始 。 首先 , 写 出 图 表 的 名 称 ( 存储 在 thisChart.name 中 , 显示 在 一 个 <h2> 
标签 中 )， 然 后 开始 一 个 <table> 标 签 。 从 这 里 开始 ， 将 在 chartBody 变量 中 添加 内 容 ， 最 后 将 把 它 写 
到 页 面 上 。 
9. for (var i=0; i«thisChart.years.length; i++) { 
这 是 双 层 循环 的 第 一 层 ， 我 们 用 这 两 个 循环 遍历 步骤 3 中 建立 的 二 维 数组 。 这 个 外 层 循环 使 用 i 
作为 索引 变量 ， 循 环 的 次 数 是 图 表 涉 及 的 年 份 数量 。 
10. if (currDirection=="horizontal") { 


如 果 用 户 希 望 看 到 图 表 的 水 平版 本 ( 见 图 12-8 )， 就 运行 以 下 代码 。 
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12-8 柱状 图 的 初始 水 平版 本 
11. chartBody += "<tr class-'horiz'»«th rowspan="+(thisChart.fieldnames.length+1) ; 
chartBody += ">"+thisChart.years[i]+"</th><td colspan=2></td></tr>"; 
每 个 水 平 图 表 的 第 一 行 包含 第 i 个 年 份 标签 。 因 为 两 个 图 表 的 字段 数 可 能 不 一 样 ， 所 以 我 们 需要 
实时 计算 rowspan。 
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12. for (var j=0; j<thisChart.fieldnames.length; j++) { 

这 是 内 层 循环 的 水 平版 本 。 这 个 内 层 循环 使 用 j 作为 索引 变量 ， 循 环 的 次 数 是 存储 的 fieldnames 
数组 的 元 素数 量 。 

13. chartBody += "<tr class-'horiz'» <td>"+thisChart.fieldnames[j]; 

表格 的 细节 行 从 这 里 开始 。 首 先 写 出 值 标签 ( 浏览 器 类 型 或 JavaScript 版 本 )， 此 数据 存储 在 
fieldnames 数组 的 第 j 个 元 素 中 。 

14. chartBody += "«/td»«td»«img alt-'horiz bar' src='"+imgSrc; 

chartBody += "' width="+thisChart.fields[j][i]*3+">"; 

接 下 来 ,结束 前 面 的 单元 格 并 且 计 算 柱 状 图 像 。 柱 状 图 像 的 颜色 取决 于 imgSrc, ERA P L3] LÀ] 
元 素 的 值 乘 以 3。 例 如， 如 果 imgSrc 是 lilBlue.gif, thisChart. fields[3][4] 是 30, 那么 形成 的 图 
像 标签 会 绘制 一 个 蓝 色 的 宽 为 90 像素 的 矩形 。 

15. chartBody += thisChart.fields[j][i]+"</td></tr>"; 

现在 ， 在 图 像 的 右边 写 出 实际 数据 值 ， 结 束 这 一 行 。 水 平 图 表 代 码 的 内 层 循 环 到 这 里 就 结束 了 。 


16. chartBody += "<tr class-'vert'»«th rowspan=2>"+thisChart.years[i]+"</th>"; 



































如 果 用 户 希 望 看 到 图 表 的 垂直 版 本 〈 见 图 12-9 )， 那 么 首先 写 图 表 的 初始 行 。 图 表 的 垂直 版 本 要 
稍微 复杂 一 些 ， 而 且 需 要 两 个 独立 的 内 层 j 循环 。 这 里 写 出 图 表 的 标签 。 
一 = "TES dl.dropboxusercontent.com/u/21 z 


Choose a chart y 
2 sta s Desktop browser usage by year 
v 


— 
= 
in 
-fer 
— i 


sias 3127 1025 
2010 Ms IE Firefox Camne 








334 Mls 3323 
2012 Ms iE Firefox Chrome 


2 4 


525 DN 4155 
2013 vs 下 Fees Crone 


2053 466 


us 3 
2014 — MS IE Feefon Chrome 























12-9. ”柱状 图 的 垂直 版 本 
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17. for (var j=0; j<thisChart.fieldnames.length; j++) { 
这 里 是 第 一 个 内 层 循环 。 它 在 一 行 中 绘制 图 上 的 所 有 线条 。 
18. chartBody += "<td><img alt='vert bar' src='"+imgSrc; 
chartBody += "' height="+thisChart.fields[j][i]*3+"></td>"; 
这 里 动态 地 编写 图 像 标签 .这 一 次 ,高 度 值 基于 二 维 数组 中 的 值 . 例 如 ,如 果 imgSrc 是 lilGreen.gif, 
thisChart.fields[3][4] 是 30， 那 么 形成 的 图 像 标签 会 绘制 一 个 绿色 的 矩形 ， 高 为 90 像素 。 


19. chartBody += "</tr><tr class='vert'>"; 
绘制 完 图 上 的 所 有 线条 之 后 ， 结 束 这 个 表格 行 并 开始 一 个 新 行 。 
20. for (j=0; j<thisChart.fieldnames.length; j++) { 
这 是 第 二 个 内 层 循 环 。 它 在 对 应 的 线条 下 面 写 出 每 个 数据 点 的 值 ， 然 后 写 出 了 轴 的 标签 。 
21. chartBody += "<td>"+thisChart.fields[j][i]+"<br>"; 
chartBody += thisChart.fieldnames[j]+"</td>"; 
这 里 写 出 每 个 线条 的 信息 。 数 组 元 素 thisChart.fields[j][i] 是 这 个 线条 的 值 thisChart. 
fieldnames[j] 是 它 的 数据 标签 。 
22. chartBody += "</tr>"; 
在 结束 最 后 一 个 内 层 循环 之 后 ， 需 要 结束 最 后 的 行 标签 。 
23. chartBody += "</table>"; 
document.getElementById("chartArea").innerHTML = chartBody; 
现在 ,水 平和 垂直 代码 都 结束 了 ， 外 层 循环 也 结束 了 ， 所 以 写 出 最 后 的 表格 标签 以 结束 脚本 ， 然 
后 将 组 成 的 整个 字符 串 放 进 页 面 的 chartArea 部 分 的 innerHTML 属性 中 。 
v 提示 
O 这 里 的 代码 使 用 3 个 图 像 : lilRed.gif、lilBlue.gif 和 1lilGreen.gif。 它 们 都 是 具有 对 应 颜色 的 单 像 
素 的 GIF, HTML 允许 设置 图 像 的 高 度 和 宽度 ， 而 不 管 图 像 的 实际 尺寸 , 所 以 可 以 用 单 像素 的 
像 创建 任何 大 小 和 形状 的 线条 。 
口 可 能 读者 会 有 疑问 ， 水 平 栏 的 高 度 和 垂直 栏 的 宽度 都 是 在 脚本 12-14 的 CSS 文件 中 设置 的 。 
由 于 这 些 数 值 是 静态 的 〈 它们 不 会 改变 )， 因 此 没有 必要 使 用 JavaScript 进行 实时 设置 。 
O 只 需 修改 步骤 3 ~ 5 中 的 数组 值 ， 就 可 以 将 这 个 图 表 改 为 显示 几乎 任何 数据 。 无 论 将 这 些 数组 
设置 成 什么 ， 都 不 需要 修改 创建 图 表 的 循环 。 
O 这 些 图 表 中 的 统计 数据 来 自 StatCounter’s Global Statistics ( gs.statcounter.com )。 
Q 如 果 对 步 又 3 和 步骤 5 中 数组 的 代码 感到 陌生 ， 请 参考 脚本 12-10。 
口 如 果 对 创建 新 对 象 的 代码 感到 陌生 ， 建 议 回顾 脚本 10-11。 


12.7 eR ER 


JavaScript 最 强大 的 用 途 之 一 是 ， 在 运行 时 改变 页 面 所 使 用 的 样式 表 。 例 如 ， 可 以 向 站 点 的 访问 
者 提供 样式 选项 ， 从 而 允许 他 们 选择 站 点 上 文本 的 样式 和 大 小 。 一 些 人 喜欢 阅读 小 的 sans-serif 文本 ， 
这 样 就 能 够 在 屏幕 上 看 到 大 量 单词 C 见 图 12-10 ), 而 其 他 人 喜欢 比较 大 的 serif 文本 , 这 样 可 读 性 更 好 
( 见 图 12-11 )。 现 在 ， 可 以 让 这 两 类 访问 者 都 满意 。 甚 至 更 进 了 一 步 ， 这 个 脚本 还 使 用 cookie 存储 用 
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户 的 选择 ， 这 样 用 户 以 后 访问 时 会 自动 采用 他 们 原来 选择 的 档 

















hh ML >18 
|+ Style Changer mr 
a dropboxusercontent.c ; = E hi a dropboxusercontent.c » = 
+ p Ptr 四 + PLR 四 
Lorem ipsum dolor sit amet, consectetuer ?3 J 
adipiscing elit, Aenean lacus elit, volutpat vitae, Change your font: Lorem ipsum dolor sit amet, consectetuer 
egestas in, tristique ut, nibh. Donec congue adipiscing elit. Aenean lacus elit, volutpet vitae, Change your font 
lacnia magna. Duis tortor justo, dapibus vel, a We egestas in, tristique ut, nibh. Donec congue d 
vulputate sed, mattis sit amet, leo. Cras purus ———— had " 
quam, semper quis, dignissim id, hendrent eget, : lacinia magna. Duis tortor justo, dapibus vel, Sm Sans || Lg Senf 
ante. Nulla id lacus eget nulla bibendum l vulputate sed, mattıs sit amet, leo. Cras purus Ly 
venenatis. Duis faucibus adipiscing mauris quam, semper quis, dignissim id, hendrerit eget, 
Integer augue. In vulputate purus eget enim. te. Nulla id lacus eget nulla bit ur 
Nam odio eros, porta vitae, bibendum sit amet, iaculis nec, elit. Cras egestas ante. Nul x v. ko -— x ove I lav 
scelerisque pede. Donec a tellus. Nullam consectetuer fringila nunc. venenatis. Duis faucibus adipiscing mauns. Integer augue In vulputate purus 
eget enim. Nam odio eros, porta vitae, bibendum sit amet, iaculis nec, elit 

Nam varius metus congue ligula. In hac habitasse platea dictumst. In ut ipsum a Cras egestas scelerisque pede. Donec a tellus. Nullam consectetuer fringilla 


pede rhoncus convallis. Sed at enim. Integer sed metus quis est egestas 
vestibulum. Quisque mattis tortor a lorem. Nam diam. Integer consequat lectus. 
Donec moleste elementum nesl. Donec ligula sapien, volutpat eget, dictum quis, 
nos a, odio. Noam augue enim, gae nec lampor ac, inarun in, uma. Nam varius metus congue ligula. In hac habitasse platea dictumst. In ut ipsum 
Aliquam mauris. Duis massa urna, ultricies id, condimentum ac, gravida nec, CES 

dolor. Morbi et est quis enim gravida nonummy. Cum sociis natoque penatibus a pede rhoncus convallis. Sed at enim. Integer sed metus quis est egestas 
et magnis dis parturient montes, nascetur ridiculus mus. Mauris nisl quam, vestibulum. Quisque mattis tortor a lorem. Nam diam. Integer consequat 
tnadunt ultrices, malesuada eget, posuere eu, lectus. Nulla a arcu. Sed lectus. Donec molestie elementum nisl. Donec ligula sapien, volutpat eget, 


consectetuer arcu et velit. Quisque dignissim risus vel elit. = dictum quis, mollis a, odio. Aliquam augue enim, gravida nec, tempor ac, a 
anI 


图 12-10 一 些 访问 者 喜欢 阅读 小 的 sans-serif 文本 ， 图 12-11 其 他 访问 者 喜欢 选择 比较 大 的 
这 样 就 能 够 在 页 面 上 看 到 更 多 的 文本 serif 文本 ， 这 样 可 读 性 更 好 


nunc 























脚本 12-16 ”这 个 页 面包 含 页 面 内 容 和 用 户 控件 ， 它 调用 用 户 选 择 的 外 部 样式 表 


<!DOCTYPE html» 
<html> 
<head> 
<title>Style Changer</title> 
<link href="scripto7.css" rel="stylesheet"> 
<link href="sansStyle.css" rel="stylesheet" title="default"> 
<link href="serifStyle.css" rel="alternate stylesheet" title="serif"> 
<script src="script07.js"></script> 
</head> 
<body> 
<div class="navBar"><p>Change your font:</p> 
«input type-"button" id="default" class-"sansBtn" value="Sm Sans" 
«input type="button" id="serif" class="serifBtn" value="Lg Serif"> 
</div> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean lacus elit, volutpat vitae, 
regestas in, tristique ut, nibh. Donec congue lacinia magna. Duis tortor justo,dapibus vel, 
vulputate sed, mattis sit amet, leo. Cras purus quam, semper quis, dignissim id, hendrerit eget, 
'ante. Nulla id lacus eget nulla bibendum venenatis. Duis faucibus adipiscing mauris. Integer augue. 
>In vulputate purus eget enim. Nam odio eros, porta vitae,bibendum sit amet, iaculis nec, elit. Cras 
"egestas scelerisque pede. Donec a tellus. Nullam consectetuer fringilla nunc.«/p» 





«p»Nam varius metus congue ligula. In hac habitasse platea dictumst. In ut ipsum a pede rhoncus 
^convallis. Sed at enim. Integer sed metus quis est egestas vestibulum. Quisque mattis tortor 
^a lorem. Nam diam. Integer consequat lectus. Donec molestie elementum nisl. Donec ligula sapien, 
volutpat eget, dictum quis, mollis a, odio. Aliquam augue enim, gravida nec, tempor ac, interdum 
>in, urna. Aliquam mauris. Duis massa urna, ultricies id,condimentum ac, gravida nec, dolor. 
^Morbi et est quis enim gravida nonummy. Cum sociis natoque penatibus et magnis dis parturient 
"montes, nascetur ridiculus mus. Mauris nisl quam,tincidunt ultrices, malesuada eget, posuere 
>eu, lectus. Nulla a arcu. Sed consectetuer arcu et velit. Quisque dignissim risus vel elit.</p> 


«p»Nunc massa mauris, dictum id, suscipit non, accumsan et, lorem. Suspendisse non lorem quis dui 
^rutrum vestibulum. Quisque mauris. Curabitur auctor nibh non enim. Praesent tempor aliquam 
ligula. Fusce eu purus. Vivamus ac enim eget urna pulvinar bibendum. Integer porttitor, augue 
ret auctor volutpat, lectus dolor sagittis ipsum, sed posuere lacus pede eget wisi. Proin vel 
"arcu ac velit porttitor pellentesque. Maecenas mattis velit scelerisque tellus. Cras eu tellus 
^quis sapien malesuada porta. Nunc nulla. Nullam dapibus malesuada lorem. Duis eleifend rutrum 
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tellus. In tempor tristique neque. Mauris rhoncus. Aliquam purus.</p> 


<p>Morbi felis quam, placerat sed, gravida a, bibendum a, mauris. Aliquam porta diam. Nam consequat 
feugiat diam. Fusce luctus, felis ut gravida mattis, ante mi viverra sapien, a vestibulum tellus 
lectus ut massa. Duis placerat. Aliquam molestie tellus. Suspendisse potenti. Fusce aliquot 
tellus a lectus. Proin augue diam, sollicitudin eget, hendrerit non, semper at, arcu. Sed 
suscipit tincidunt nibh. Donec ullamcorper. Nullam faucibus euismod augue. Cras lacinia. Aenean 
scelerisque, lorem sed gravida varius, nunc tortor gravida odio, sed sollicitudin pede augue 
ut metus. Maecenas condimentum ipsum et enim. Sed nulla. Ut neque elit, varius a, blandit quis, 
facilisis sed, velit. Suspendisse aliquam odio sed nibh.</p> 


</body> 
</html> 
脚本 12-17 这 个 CSS 包含 总 是 加 载 的 样式 ， 无 论 选 择 哪 种 字体 
body { 
margin: 0 20px; 
padding: 0; 


background-color: #FFF; 
color: #000; 


} 


div.navBar { 
background-color: #CCC; 
width: 175px; 
position: relative; 
top: -20px; 
right: -20px; 
float: right; 
padding: 20px 0 20px 20px; 
border-left: 2px groove #999; 
border-bottom: 2px groove #999; 


} 
.sansBtn { 
font: 12px/13px verdana, geneva, arial, helvetica, sans-serif; 
} 
.serifBtn { 
font: 16px/17px "Times New Roman", Times, serif; 
} 


脚本 12-18 ”这 个 样式 表 (sansStyle.css ) 将 所 有 文本 改 为 小 的 sans-serif 字体 


body, p, td, ol, ul, select, span, div, input { 
font: 12px/13px verdana, geneva, arial, helvetica, sans-serif; 


} 
脚本 12-19 ”这 个 样式 表 ( serifStyle.css ) 将 页 面 文本 改 为 比较 大 的 serif 字体 


body, p, td, ol, ul, select, span, div, input { 
font: 16px/17px "Times New Roman",Times, serif; 
} 


脚本 12-20 ”这 个 脚本 处 理 当 前 样式 表 的 设置 


window. addEventListener("load", initStyle, false); 
window. addEventListener("unload" ,unloadStyle, false); 


function initStyle() { 
var thisCookie = cookieVal("style"); 
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if (thisCookie) { 
var title = thisCookie; 


else { 
var title = getPreferredStylesheet(); 


} 
setActiveStylesheet (title) ; 


var allButtons = document.getElementsByTagName("input") ; 
for (var i-0; i«allButtons.length; i++) { 
if (allButtons[i].type == "button") { 
allButtons[i].addEventListener("click", setActiveStylesheet, false); 
} 


} 
} 


function unloadStyle() { 
var expireDate = new Date(); 
expireDate. setYear (expireDate.getFullYear()+1); 
document.cookie = "style=" + getActiveStylesheet() + 
";path=/"; 


";expires=" + expireDate.toGMTString() + 


} 


function getPreferredStylesheet() { 
var thisLink, relAttribute; 
var linksFound = document.getElementsByTagName("link"); 


for (var i=0; i«linksFound.length; i++) { 
thisLink = linksFound[i]; 
relAttribute = thisLink.getAttribute("rel"); 
if (relAttribute.indexOf("style") > -1 && relAttribute.indexOf("alternate") == -1 && thisLink. 
'getAttribute("title")) { 
return thisLink.getAttribute("title"); 
} 


} 


return 


"n, 
, 


} 


function getActiveStylesheet() { 
var thisLink, relAttribute; 
var linksFound = document.getElementsByTagName("link"); 


for (var i=0; i<linksFound.length; i++) { 
thisLink = linksFound[i]; 
relAttribute = thisLink.getAttribute("rel"); 
if (relAttribute.indexOf("style") > -1 8& thisLink.getAttribute("title") && !thisLink.disabled) { 
return thisLink.getAttribute("title"); 
} 


} 


return 


"n, 
3 


} 


function setActiveStylesheet(inVal) { 
var thisLink, relAttribute; 
var linksFound = document.getElementsByTagName("link"); 


if (inVal) { 
if (typeof inVal == "string") { 
var title = inVal; 


} 
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else { 
var title = inVal.target.id; 
} 
else { 
var title = window.event.srcElement.id; 


} 


for (var i=0; i«linksFound.length; i++) { 
thisLink = linksFound[i]; 
relAttribute = thisLink.getAttribute("rel"); 
if (relAttribute.indexOf("style") > -1 8& thisLink.getAttribute("title")) { 
if (thisLink.getAttribute("title") == title) ( 
thisLink.disabled - false; 
} 
else { 
thisLink.disabled = true; 
} 
} 
} 
} 


function cookieVal(cookieName) { 
var thisCookie = document.cookie.split("; "); 
for (var i=0; i«thisCookie.length; i++) { 
if (cookieName == thisCookie[i].split("=")[0]) { 
return thisCookie[i].split("=")[1]; 
} 


} 


return ""; 


} 


> 允许 用 户 切换 样式 表 








1. «link href="sansStyle.css" rel="stylesheet" title="default"> 

脚本 12-16 包含 一 个 到 外 部 样式 表 的 标准 链接 ， 但 是 其 中 多 了 一 点 新 东西 : 它 有 一 个 title 属性 
default。 这 会 在 后 面 的 操作 中 起 作用 。 

2. «link href="serifStyle.css" rel="alternate stylesheet" title="serif"> 

这 里 使 用 Link 标签 链接 另 一 个 样式 表 。 但 是 ，rel 属性 没有 设置 为 通常 的 stylesheet, ， 而 是 设置 
为 alternate stylesheet。 这 是 因为 这 个 样式 表 实 际 上 不 是 默认 样式 表 ， 而 是 只 在 用 户 选 择 它 时 使 用 。 

3. «input type-"button" id-"default" class-"sansBtn" value="Sm Sans"> 

«input type-"button" id-"serif" class-"serifBtn" value-"Lg Serif" » 

是 两 个 按钮 : Sm Sans 和 Lg Serif。 单 击 前 一 个 按钮 ， 就 会 使 页 面 上 的 所 有 文本 显示 为 小 的 
sans-serif 字体 ; 单 击 后 一 个 按钮 ,就 会 使 页 面 上 的 所 有 文本 显示 为 比较 大 的 serif 字体 。 如 果 浏 览 絮 支 
持 的 话 ， 脚 本 12-17 中 的 样式 会 使 按钮 文本 本 身 显示 为 目标 字体 ， 这 使 用 户 能 够 预先 看 到 选择 这 个 按 
钮 之 后 的 文本 效果 。 

4. body, p, td, ol, ul, select, span, div, input { 
font: 12px/13px verdana, geneva, arial, helvetica, sans-serif; 
} 
脚本 12-18 (sansStyle.css ) 告诉 浏览 器 ， 在 装载 它 时 ， 它 涉及 的 所 有 标签 都 应 该 显示 为 12px 的 
Verdana 字体 ( 或 者 用 户 计算 机 上 安装 的 某 种 sans-serif 字体 )。 
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5. body, p, td, ol, ul, select, span, div, input ( 
font: 16px/17px "Times New Roman", Times, serif; 
} 
与 之 相反 ,脚本 12-19 (serifStyle.css ) 告 诉 浏 览 器 , 它 涉及 的 所 有 标签 都 应 该 显示 为 16px 的 Times 
New Roman 字体 (或 者 可 以 找到 的 其 他 某 种 serif 字体 )。 
6. var thisCookie = cookieVal ("style"); 
if (thisCookie) { 
var title = thisCookie; 
} 
else { 
var title = getPreferredStylesheet(); 
} 
setActiveStylesheet (title) ; 
脚本 12-20 中 的 initstyle() 函 数 在 页 面 运行 时 加 载 , 它 的 目标 是 对 页 面 需 要 的 所 有 东西 进行 初始 
化 。 在 这 里 ， 检 查 这 个 用 户 是 否 已 经 设置 了 cookie (cookie 中 保存 他 选择 的 样式 )。 我 们 的 老 伙 伴 
cookieVal() 函数 来 自 第 9 章 ， 它 读 取 cookie 并 且 检 查 是 否 有 称 为 style 的 cookie。 如 果 有 ， 它 的 值 就 
是 我 们 需要 的 样式 表 ; 如 果 没 有 ， 就 调用 getPreferredstylesheet()。 知 道 了 所 需 的 样式 表 之 后 ， 就 
调用 setActiveStylesheet() 来 设置 页 面 外 观 。 
7. var allButtons = document.getElementsByTagName("input") ; 
for (var i=0; i<allButtons.length;i++) { 
if (allButtons[i].type == "button") { 
allButtons[i].addEventListener("click",setActiveStylesheet, false); 
} 
} 
initstyle() 函 数 还 需要 给 按钮 添加 事件 处 理 程 序 。 在 这 里 ,在 单 击 按钮 时 ， 事 件 处 理 程序 都 调用 
setActiveStylesheet(). 
8. function unloadStyle() { 
var expireDate = new Date(); 


expireDate.setYear(expireDate.getFullYear()41); 







































































document. cookie = "style=" + getActiveStylesheet() + ";expires-" + expireDate.toGMTString() 
+ "spath-/"; 
i 
KAART, iF BEV cookie 供 以 后 使 用 。cookie 的 终止 日 期 设置 为 一 年 之 后 ， 然 后 调用 
getActiveStylesheet() 获 得 用 户 当前 的 设置 ， 并 且 写 出 cookie 供 以 后 使 用 。 
9. function getPreferredStylesheet() { 
var thisLink, relAttribute; 
























































var linksFound = document.getElementsByTagName("link"); 
如 果 在 加 载 页 面 时 ， 没 有 cookie 能 够 提供 用 户 以 前 选择 的 样式 ， 脚 本 就 需要 判断 首选 的 样式 表 。 
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这 个 步骤 和 下 一 个 步骤 中 的 getPreferredStylesheet() 实 现 这 个 功能 。 
10. for (var i=0; i<linksFound.length;i++) { 

thisLink = linksFound[i]; 

relAttribute = thisLink.getAttribute("rel"); 

if (relAttribute.indexOf("style") > -1 8& relAttribute.indexOf("alternate") == -1 8& 
thisLink.getAttribute("title")) { 
return thisLink.getAttribute("title"); 

} 

} 

这 个 函数 遍历 每 个 链接 标签 ,检查 它们 是 否 有 rel 属性 ， 这 个 属性 的 值 是 否 包含 style， 这 个 属性 
的 值 是 否 不 包含 alternate， 以 及 标签 是 否 有 title 属性 。 如 果 找 到 符合 所 有 这 些 条 件 的 链接 标签 ， 它 
链接 的 就 是 首选 样式 表 ， 所 以 返回 它 的 title 属性 。 

为 了 了解 代码 中 的 哪个 实际 标签 是 首选 样式 表 ， 看 一 下 HTML 文件 中 的 Link 标签 。 虽 然 HTML 
文件 中 有 3 个 link 标 签 , 但 是 只 有 两 个 有 title 属性 。 在 这 两 个 1ink 标 签 中 ,一 个 有 rel 属性 stylesheet, 
另 一 个 的 rel 属性 是 alternate stylesheet。 因 此 ， 首 选 样式 表 是 title 属性 为 default 的 那个 。 

11. for (var i=0; i«linksFound.length; i++) ( 

thisLink = linksFound[i]; 
relAttribute = thisLink.getAttribute("rel"); 
if (relAttribute.indexOf("style") > -1 && thisLink.getAttribute ("title")&& !thisLink. 
"disabled) { 
return thisLink.getAttribute("title"); 
} 
} 

正如 前 面 提 到 的 ， 当 用 户 离开 这 个 站 点 时 ,我们 希望 使 用 cookie 存储 他 们 选择 的 样式 表 。 这 样 的 
话 ， 当 他 们 以 后 再 次 访问 这 里 时 ， 就 会 看 到 他 们 喜欢 的 字体 。 尽 管 可 以 在 用 户 每 次 单 击 样式 按钮 
时 写 cookie， 但 更 好 的 方法 是 只 在 用 户 离开 站 点 时 写 cookie, Æ, getActiveStylesheet () eA 
A (ARMA SHAE ) 循环 遍历 所 有 link 标签 ,选择 当前 启用 的 样式 表 ， 并 且 返 回 这 个 样 
式 表 的 title。 

12. var thisLink, relAttribute; 

var linksFound = document.getElementsByTagName("link"); 






























































































































































if (inVal) { 
if (typeof inVal == "string") { 
var title = inVal; 
} 
else { 
var title = inVal.target.id; 


} 
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} 
else { 
var title = window.event.srcElement.id; 
} 
正如 前 面 看 到 的 ， 当 用 户 加 载 这 个 页 面 时 ， 调 用 setActiveStylesheet() 函 数 并 日 传递 一 个 参数 ， 

这 个 参数 在 函数 内 称 为 inVal。 但 是 ， 在 单 击 按钮 之 后 也 会 调用 setActivestylesheet()。 在 这 种 情况 

下 ,根据 使 用 的 浏览 旨 和 浏览 絮 处 理事 件 的 方式 ， 可 能 传递 参数 ， 也 可 能 不 传递 。 在 这 里 进行 检查 ， 

从 而 判断 哪个 函数 调用 了 这 个 函数 以 及 用 户 希 望 的 操作 。 有 以 下 3 种 可 能 的 情况 。 

口 initstyle() 调 用 了 这 个 函数 ， 并 且 传 递 给 它 一 个 包含 首选 样式 表 的 字符 串 。 在 这 种 情况 下 ， 

inal 存在 而 且 它 是 一 个 字符 串 ， 所 以 将 title 设置 为 inVal。 

O 在 支持 W3C 样式 事件 的 浏览 器 中 单 击 了 样式 按钮 。 在 这 种 情况 下 ，inVal 自动 设置 为 触发 此 
函数 的 事件 ， 所 以 inval 存在 ， 但 它 不 是 字符 串 。 当 发 生 这 种 情况 时 ， 事 件 的 target ( 即 导致 
触发 事件 的 目标 ) 就 是 被 单 击 的 按钮 ， 这 个 按钮 的 id 存储 着 所 需 的 样式 名 称 。 

O 在 不 支持 W3C 标准 但 支持 TE 事件 模型 的 浏览 器 中 单 击 了 样式 按钮 。 如 果 是 这 种 情况 ， 那 么 
inVal 变量 不 存在 ， 所 以 要 从 window.event.srcElement.id 获得 所 需 的 样式 。 
13. thisLink = linksFound[i]; 
relAttribute = thisLink.getAttribute("rel"); 
if (relAttribute.indexOf("style") > -1 8& thisLink.getAttribute("title")) { 
if (thisLink.getAttribute("title") == title) ( 
thisLink.disabled - false; 
} 
else { 
thisLink.disabled = true; 
} 
} 
setActiveStylesheet() 函 数 饥 历 文 档 中 的 所 有 链接 标签 ， 检 查 每 个 标签 是 否 同 时 具有 包含 style 

的 rel 属性 和 title 属性 。 如 果 这 两 个 条 件 都 成 立 ， 那 么 首先 禁用 这 个 链接 ， 然 后 在 并 且 只 在 title 

属性 设置 为 title 值 的 情况 下 重新 启用 它 。 

所 以 ， 如 果 当 前 使 用 的 样式 表 的 title 属性 为 default， 而 用 户 单 击 了 Lg Serif 按 钮 ，JavaScript 就 

知道 应 该 装载 serif 样式 表 。 有 一 个 link 标签 具有 title 属性 serif， 所 以 禁用 所 有 其 他 样式 表 ( 即 这 

里 的 default 样式 表 )， 只 打开 serif 样式 表 。 
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Ww 总 是 在 不 断 变 化 ，Web 和 JavaScript 的 大 趋势 在 2005 年 年 初 又 有 了 新 变化 。 出 现 了 新 型 

的 Web 应 用 程序 ,而且 它们 很 快 流行 起 来 了 ,这 些 应 用 程序 包括 来 自 谷 歌 的 Gmail 和 Google 

Maps, 以 及 来 自 其 他 公司 的 Flickr 等 程序 。 这 些 新 站 点 的 共同 特色 是 , 它们 表现 得 更 像 桌面 应 用 程序 ， 

具有 快速 的 高 响应 性 的 用 户 界面 。 在 传统 的 Web 应 用 程序 中 , 当 用 户 单 击 链接 时 ,要 等 待 服务 器 作出 

响应 并 且 刷 新 页 面 ， 而 且 这 个 过 程 会 重复 进行 。 但 是 ， 这 些 新 站 点 具有 更 好 的 响应 性 ， 能 够 立即 更 新 
页 面 ， 这 提供 了 出 色 的 交互 和 更 好 的 用 户 体 验 。 

这 些 新 站 点 的 强大 功能 来 自 于 称 为 Ajax 的 新 技术 ( 其 实 这 种 技术 并 不 是 全 新 的 )。 可 以 使 用 Ajax 
技术 让 自己 的 站 点 具有 更 好 的 响应 性 、 更 吸引 人 , 这 会 使 站 点 的 用 户 在 浏览 过 程 中 更 愉快 。 更 棱 的 是 ， 
你 不 需要 学 习 全 新 的 技术 ， 因 为 Ajax 是 由 你 已 经 掌握 的 几 种 技术 组 合 而 成 的 ( 本 书 前 面 已 经 讨论 过 
这 些 技术 )。 

在 本 章 中 ， 你 将 学 习 如 何在 后 台 向 服务 器 请 求 信息 ， 并 且 将 它 转换 为 Ajax 应 用 程序 可 以 使 用 的 
乡 式 ， 自 动 刷新 来 自 服 务 器 的 信息 ， 为 页 面 上 的 对 象 构建 很 酷 的 预览 效果 ， 以 及 构建 一 个 Ajax 应 用 
程序 ， 它 能 够 像 桌面 应 用 程序 那样 自动 补 全 表单 字段 。 


13.1 Ajax 的 定义 


关于 Ajax 的 有 趣 现象 之 一 是 ， 对 于 Ajax 究 况 是 什么 有 一 些 混 淆 ， 甚 至 是 争论 。 我 们 知道 Ajax 
很 重要 而 旦 非常 流行 ,甚至 因此 在 本 书 前 几 版 的 书 名 中 增加 了 Ajax 这 个 词 ， 以 此 迎合 Ajax 潮流 。 所 
以 有 必要 洪 清 Ajax 是 什么 ， 以 及 在 我 们 使 用 这 个 术语 时 指 的 是 什么 。 
首先 , 谈 谈 Ajax 的 历史 。2005 4E 2 H , Jesse James Garrett ( Adaptive Path 的 创始 人 之 一 , Adaptive 
Path 是 美国 旧金山 的 一 个 Web 界面 和 设计 公司 ) 在 他 们 站 点 上 的 一 篇 文章 中 首次 提出 了 Ajax 这 个 术 
语 。 他 说 Ajax 是 Asynchronous JavaScript and XML ( 异步 JavaScript 和 XML ) 的 缩写 ( 但 不 是 首 字母 缩 
写 )。 在 adaptivepath.com/ideas/ajax-new-approach-web-applications/ 上 可 以 读 到 这 篇 文章 ( 见 图 13-1 )。 
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Ajax: A New Approach to Web 
Applications 


If anything about current interaction design can be called "glamorous." R's creating Web 
applications. After all when wes the lest time ycu heard someone rave about the interaction 
design of a product that wasn't on the Web? (Ckay, besides the Pod) AF the cool, innovative 
new projects are online. 


Despite this, Web interaction designers can't help but feel a litte envious of our colleagues 
who create desktop software. Desktop applications have a richness and responsiveness that 
has seemed out of reach on the Web. The same simplicity that enabled the Web's rapid 
proliferation also creates a gap between the experiences we can provide and the 
experiences users can get from a desktop application 


That gap is closing. Take a lock at Google Suggest. Watch the way the suggested terms 
update as you type, amost instantly. Now lack at Google Maps. Zoom in. Use your cursor to 
grab the map and scrol around a bit. Again, everything happens almost instantly, with no 
waiting for pages to reload. 


Google Suggest and Googie Maps are two examales cf a new approach to web appicabens 
that we at Adaptive Path have been calling Ajax The name is shorthand for Asynchronous 
JavaScript + XML, and it represents a fundamental shift in what's possible on the Web 


DEFINING AJAX 
Ajax isn't a technology. It's really several technologies, each flourishing in its own right, 
coming together in powerful new ways. Ajax incorporates: 


o standards-based presentation using XHTML end CSS; 
dynamic display and interaction using the Dooument Ot 

» data interchange and manipulation using XML and XSLT; 
asynchronous data retrieval using XMLHttpRaquest 

o end JavaScript binding everything together. 


ject Modet 


The classic web application model works Ike this: Most user actions in the interface trigger an 
HTTP request back to a web server. The server does some processing — retrieving data, 
crunching numbers, taking to various legacy systems — and then returns an HTML page to 
the cient. It's a model adapted from the Web's original use as a hypertext medium, but as 


图 13-1 这 是 启动 Ajax 热潮 的 那 篇 文章 


根据 Garrett 的 说 法 , Ajax 本 身 并 不 是 一 种 新 技术 , 它 是 由 几 种 长 期 存在 的 Web 技术 组 合 而 成 的 : 
O 使 用 HTML 和 CSS 控制 页 面 结 构 和 表示 方式 ; 

口 使 用 DOM 显示 和 操纵 页 面 ; 

口 使 用 浏览 器 的 XMLHttpRequest 对 象 在 客户 机 和 服务 器 之 间 传 输 数据 "; 

O 使 用 XML 作为 在 客户 机 和 服务 器 之 间 传 输 的 数据 的 格式 ”; 

口 最 后 ， 使 用 JavaScript 动态 地 显示 所 有 内 容 并 且 提 供 交 互 功能 。 

Ajax 应 用 程序 在 用 户 和 服务 器 之 间 建 立 一 个 中 介 。Ajax 引擎 (Ajax engine， 也 称 为 网 页 的 
JavaScript 部 分 ) 向 用 户 提供 界面 ( 当然 要 借助 于 HTML 和 CSS )。 如 果 用 户 的 操作 并 不 要 求 向 服务 
器 发 出 请 求 (例如 ， 显 示 已 经 存储 在 本 地 的 数据 )， 那 么 Ajax 引擎 会 进行 响应 。 这 使 浏览 右 能 够 对 
许多 用 户 操 作 立 刻 作出 反应 ， 使 网 页 的 反应 像 桌 面 程 序 那 样 迅 速 。 如 果 用 户 操 作 需 要 服务 器 调用 ， 
Ajax 引擎 就 异步 地 执行 它 , 因此 用 户 不 需要 等 待 服务 器 的 响应 。 用 户 可 以 继续 与 应 用 程序 进行 交互 ， 
当 请 求 的 数据 到 达 时 ， 引 擎 会 更 新 页 面 。 这 里 的 重点 是 ， 用 户 的 操作 不 会 由 于 等 待 服务 器 而 暂停 。 

随 着 这 种 技术 的 发 展 ， 即 使 Web 程序 不 包含 所 有 这 些 组 成 部 分 ， 也 可 以 称 为 Ajax 应 用 程序 ， 
此 引起 了 混淆 和 争论。 实际 上 ， 其 至 本 书 的 两 位 作者 对 此 也 有 分 歧 。 






























































D 某 些 场合 也 可 以 使 用 iframe， 或 者 动态 添加 <script> 标 签 。 一 一 编者 注 
@ 也 可 以 使 用 ISON 等 格式 。 一 一 编者 注 





256 9% 13% Ajax 简介 











Tom 说 :“ 我 喜欢 只 用 DOM、HTML CSS 和 JavaScript 操作 页 面 ， 我 把 这 种 方式 称 为 Ajax。 人 
们 把 许多 效果 都 称 为 Ajax, 而 且 现代 站 点 的 整个 外 观 由 于 Ajax 而 改变 了 。 从 静态 网 页 到 动态 网 页 ( 有 
时 候 称 为 Web 2.0 ) 的 改变 ， 在 外 观 和 感觉 方面 借助 于 Ajax 技术 ， 无 论 在 幕后 是 和 否 有 服务 器 调用 。 这 
样 宽泛 地 定义 Ajax 可 能 会 让 纯粹 主义 者 不 满意 ， 但 是 我 认为 是 合适 的 。 

而 另 一 位 作者 Dori 是 正统 的 JavaScript 程序 员 ， 她 认为 :“ 要 想 成 为 Ajax 应 用 程序 ， 就 需要 在 客 
户 机 和 服务 器 之 间 传 递 一 些 数据 。 和 否则， 怎么 算是 新 技术 呢 ? ” 

Dori 正在 编写 Ajax 代码 ， 所 以 对 于 本 章 的 大 多 数 部 分 ,我 们 采用 她 对 Ajax 应 用 程序 是 什么 及 其 
应 该 做 什么 的 看 法 。 但 在 其 他 章节 中 ， 我 们 将 演示 如 何在 站 点 上 添加 一 些 Web 2.0 风格 的 特性 ， 这 些 
特性 具有 实际 作用 ， 而 不 只 是 装饰 。 

现在 ,我 们 谈 谈 什么 东西 不 属于 Ajax 的 范围 。 因 为 可 以 使 用 Ajax 在 网 页 上 实现 某 些 很 酷 的 视觉 
效果 ， 有 些 人 认为 能 够 使 页 面 看 起 来 更 好 的 任何 东西 都 是 Ajax， 这 导致 他 们 把 Flash 建立 的 界面 也 称 
为 Ajax。 但 是 ， 这 是 一 种 误解 。Ajax 的 作用 并 不 是 把 好 看 的 用 户 界 面 组 件 放 在 站 点 上 ， 使 用 户 界 函 
更 酷 ， 而 是 改变 用 户 操作 网 页 的 习惯 。 

那么 Ajax 会 存在 一 些 问 题 ， 这 些 问 题 很 重要 。 例 如 ， 要 想 正确 地 工作 ，Ajax 站 点 需要 运行 在 现 
代 浏 览 右 中 。 它 还 需要 JavaScript。 所 以 ， 对 于 使 用 老式 浏览 器 或 者 关闭 了 JavaScript 功能 的 用 户 ， 应 
该 怎么 做 呢 ? 对 于 残障 用 户 或 者 使 用 功能 有 限 的 手持 设备 C 比如 手机 或 手写 板 ) 的 用 户 ， 又 应 该 怎 尹 
做 呢 ? 答案 是 ， 必 须 让 站 点 能 够 平稳 地 退化 ,这 意味 着 使 用 功能 不 足 的 浏览 器 的 用 户 可 以 使 用 站 点 功 
能 的 一 部 分 ， 至 少 应 该 显示 有 意义 的 错误 消息 ， 让 他 们 知道 为 什么 不 能 使 用 你 的 站 点 。 

Ajax 应 用 程序 的 另 一 个 潜在 问题 是 ， 它 们 可 能 破坏 浏览 器 后 退 按钮 的 正常 表现 。 对 于 静态 页 面 ， 
在 单 击 后 退 按钮 时 ， 用 户 会 期 望 浏览 器 转 到 它 加 载 的 前 一 个 页 面 。 但 是 ， 因 为 启用 Ajax 的 页 面 是 动 
态 更 新 的 ， 所 以 这 种 期 望 可 能 会 落空 。 对 于 “后 退 按钮 问题 ” ， 有 一 些 解决 方案 ， 在 全 面 投 入 Ajax F 
发 之 前 ， 你 应 该 考虑 这 个 问题 及 其 解决 方案 。 

FAI, Ajax 不 依赖 于 特定 的 服务 器 端 技术 。 有 许多 公司 试图 借助 于 Ajax 热潮 推销 他 们 的 服务 器 
端 解决 方案 ， 这 只 是 他 们 做 生意 的 手段 ， 但 是 没有 理由 非 用 他 们 的 产品 不 可 。 只 要 后 端 能 够 提供 
JavaScript 可 以 读 取 的 信息 (XML 形式 )，Ajax 就 能 够 运行 。 那 些 公司 ( 比如 IBM ) 用 华丽 的 辞藻 宣 
传 他 们 的 产品 ， 只 是 为 了 让 产品 搭 上 Ajax 的 顺风 车 ， 让 你 购买 ， 你 大 可 不 必 相 信 。 


13.2 ” 读 取 服务 器 数据 


我 们 从 基础 开始 讲解 Ajax: 使 用 XMLHttpRequest 对 象 获得 和 显示 来 自 服务 器 的 数据 。 
为 了 完成 这 个 任务 ， 我们 将 使 用 脚本 13-1 (HTML ) 和 脚本 13-2 (JavaScript )。 可 以 读 取 的 文件 
有 两 个 : 脚本 13-3 所 示 的 纯 文 本 文件 和 脚本 13-4 所 示 的 XML 文件 。 


脚本 13-1 文本 文件 和 XML 文件 请 求 示 例 的 HTML 


<!DOCTYPE html> 
<html> 
<head> 
<title>My First Ajax Script</title> 
<script src="script01.js"></script> 
</head> 
<body> 
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<p> 
«a id-"makeTextRequest" href-"gAddress.txt"»Request a text file</a><br> 
«a id-"makeXMLRequest" href-"us-states.xml"»Request an XML file«/a» 
</p> 
«div id-"updateArea"» </div> 
«/body» 
</html> 


脚本 13-2 这 个 JavaScript 脚本 从 服务 器 获得 文件 


window.addEventListener("load", initAll, false); 
var xhr = false; 


function initAll() { 
document.getElementById("makeTextRequest").addEventListener("click", getNewFile, false); 
document.getElementById("makeXMLRequest").addEventListener("click", getNewFile, false); 


) 


function getNewFile(evt) ( 
makeRequest(this.href); 
evt.preventDefault(); 


function makeRequest(url) { 
if (window.XMLHttpRequest) ( 
xhr = new XMLHttpRequest() ; 


} 
else { 
if (window.ActiveXObject) { 


try { 
xhr = new ActiveXObject("Microsoft.XMLHTTP") ; 


} 
catch (e) { 
} 


} 
} 


if (xhr) { 
xhr.addEventListener("readystatechange" , showContents, false); 
xhr.open("GET", url, true); 
xhr.send(null); 





E : 43 
document .getElementById("updateArea").innerHTML = "Sorry, but I couldn't create an XMLHttpRequest"; 


} 
} 


function showContents() { 
if (xhr.readyState == 4) ( 
if (xhr.status -- 200) ( 
if (xhr.responseXML && xhr.responseXML.childNodes.length > 0) { 
var outMsg = getText(xhr.responseXML.getElementsByTagName ("choices")[0]); 


else ( 
var outMsg - xhr.responseText; 
} 
} 
else { 
var outMsg = "There was a problem with the request " + xhr.status; 
} 


document. getElementById("updateArea").innerHTML = outMsg; 
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} 


function getText(inVal) { 
if (inVal.textContent) { 
return inVal.textContent; 


return inVal.text; 
} 
} 


脚本 13-3 ”这 是 请 求 的 文本 文件 


Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, 
and dedicated to the proposition that all men are created equal. 


Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, 
can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that 
field, as a final resting place for those who here gave their lives that that nation might live. It is altogether 
fitting and proper that we should do this. 


But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The 
brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. 
The world will little note, nor long remember what we say here,but it can never forget what they did here. 
It is for us the living, rather,to be dedicated here to the unfinished work which they who fought here have 
thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us 
-- that from these honored dead we take increased devotion to that cause for which they gave the last full 
measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this 
nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, 
for the people,shall not perish from the earth. 


脚本 13-4 这 是 请 求 的 XML 文件 


<?xml version="1.0"?> 

«choices xml: lang="EN"> 
<item><label>Alabama</label><value>AL</value></item> 
<item><label>Alaska</label><value>AK</value></item> 
<item><label>Arizona</label><value>AZ</value></item> 
<item><label>Arkansas</label><value>AR</value></item> 
<item><label>California</label><value>CA</value></item> 
«item»«label»Colorado«/label»«value»CO«/value»«/item» 
<item><label>Connecticut</label><value>CT</value></item> 
<item><label>Delaware</label><value>DE</value></item> 
<item><label>Florida</label><value>FL</value></item> 
<item><label>Georgia</label><value>GA</value></item> 
<item><label>Hawaii</label><value>HI</value></item> 
<item><label>Idaho</label><value>ID</value></item> 
«item»«label»Illinois«/label»«value»IL«/value»«/item» 
<item><label>Indiana</label><value>IN</value></item> 
<item><label>Iowa</label><value>IA</value></item> 
<item><label>Kansas</label><value>KS</value></item> 
<item><label>Kentucky</label><value>KY</value></item> 
<item><label>Louisiana</label><value>LA</value></item> 
<item><label>Maine</label><value>ME</value></item> 
<item><label>Maryland</label><value>MD</value></item> 
<item><label>Massachusetts</label><value>MA</value></item> 
<item><label>Michigan</label><value>MI</value></item> 
<item><label>Minnesota</label><value>MN</value></item> 
<item><label>Mississippi</label><value>MS</value></item> 
«item»«label»Missouri«/label»«value»MO«/value»«/item» 
«item»«label»Montana«/label»«value»MT«/value»«/item» 
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<item><label>Nebraska</label><value>NE</value></item> 
<item><label>Nevada</label><value>NV</value></item> 
<item><label>New Hampshire</label><value>NH</value></item> 
<item><label>New Jersey</label><value>NJ</value></item> 
<item><label>New Mexico</label><value>NM</value></item> 
<item><label>New York</label><value>NY</value></item> 
<item><label>North Carolina</label><value>NC</value></item> 
<item><label>North Dakota</label><value>ND</value></item> 
«item»«label»Ohio«/label»«value»0H«/value»«/item» 
«item»«label»Oklahoma«/label»«value»0K«/value»«/item» 
<item><label>Oregon</label><value>OR</value></item> 
<item><label>Pennsylvania</label><value>PA</value></item> 
<item><label>Rhode Island«/label»«value»RI«/value»«/item» 
<item><label>South Carolina</label><value>SC</value></item> 
<item><label>South Dakota</label><value>SD</value></item> 
<item><label>Tennessee</label><value>TN</value></item> 
<item><label>Texas</label><value>TX</value></item> 
<item><label>Utah</label><value>UT</value></item> 
<item><label>Vermont</label><value>VT</value></item> 
<item><label>Virginia</label><value>VA</value></item> 
<item><label>Washington</label><value>WA</value></item> 
<item><label>West Virginia</label><value>WV</value></item> 
«item»«label»Wisconsin«/label»«value»WI«/value»«/item» 
«item»«label»Wyoming«/label»«value»WY«/value»«/item» 
«/choices» 


1. var xhr = false; 
脚本 13-2 中 的 xhr 变量 是 在 本 章 中 会 经 常 看 到 的 一 个 变量 。 它 是 一 个 XMLHttpRequest 对 象 (或 者 说 
在 初始 化 之 后 将 成 为 XMLHttpRequest 对 象 )。 目前, 我 们 只 需 在 任何 函数 之 外 创建 它 , 使 它 成 为 全 局 变量 
2. function initAll() { 
document . getElementById("makeTextRequest") .addEventListener("click",getNewFile, false); 
document. getElementById("makeXMLRequest") . addEventListener("click",getNewFile, false); 
) 
当 加 载 页 面 时 ， 会 调用 initAl1() 函 数 。 在 这 里 ， 我 们 设置 两 个 click 处 理 程序 ， 当 用 户 单 击 这 
两 个 链接 时 触发 getNewFile() raze. 
3. function getNewFile(evt) { 
makeRequest(this.href); 





















































evt.preventDefault(); 
) 
当 用 户 单 击 链接 时 ， 要 执行 某 些 操作 。 在 这 个 示例 中 ， 操 作 是 调用 Re 
函数 需要 知道 已 经 请 求 了 哪个 文件 。 我 们 知道 this.href 中 存储 着 这 一 信息 所 以 可 以 传递 这 个 属性 。 
当 函 数 返 回 时 ， 操 作 就 完成 了 ， 所 以 告诉 浏览 器 我 们 不 希望 加 载 新 的 网 页 。 
4. if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 



































} 
这 些 代码 在 makeRequest() 中 ， 这 是 有 意思 的 地 方 。 现 代 浏 览 器 支持 一 个 本 机 XMLHttpRequest 对 
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象 ( 见 表 13-1 )， 这 个 对 象 是 window 的 一 个 属性 。 所 以 ,我 们 检查 这 个 属性 是 否 存在 ， 如 果 存 在 ， 就 
创建 一 个 新 的 XMLHttpRequest 对 象 。 








表 13-1 XMLHttpRequest 对 象 





属 性 AO 事件 处 理 程序 
readState abort onload 
response addEventListener onloadend 
responseText getAllResponseHeaders onloadstart 
responseXML getResponseHeader onreadystatechange 
status open ontimeout 
statusText overideMimeType 
timeout send 
upload setRequestHeader 
withCredentials 


5. if (window.ActiveXObject) ( 


try { 
xhr = new ActiveXObject ("Microsoft.XMLHTTP"); 


) 
catch (e) { 
) 


} 
虽然 微软 的 正 〈 版 本 5.5 和 版 本 6) 支持 XMLHttpRequest ， 但 是 没有 这 个 对 象 的 本 机 版 本 。 在 这 
种 情况 下 ， 必 须 检 查 浏 览 器 是 否 支 持 ActiveX。 如 果 支 持 的 话 ， 就 检查 是 否 能 够 根据 ActiveX 创建 
XMLHttpRequest 对 象 〈 使 用 try/catch 异常 处 理 结构 )。 如 果 可 以 ， 就 这 么 做 。 
6. if (xhr) ( 
xhr.addEventListener("readystatechange", showContents, false); 


xhr.open("GET", url, true); 
xhr.send(null); 


} 
无 论 采 用 哪 种 方式 ， 我 们 都 应 该 会 获得 一 个 新 的 xhr 对 象 。 如 果 获 得 了 xhr 对 象 ， 就 需要 用 它 做 

3 件 事 。 我 们 总 是 用 xhr 做 下 面 3 件 事 。 

O 设置 xhr 的 readystatechange 事件 处 理 程序 。 每 当 xhr.readyState 属性 值 发 生变 化 时 , 就 会 触 

发 这 个 处 理 程序 。 

口 调用 open() 并 且 传 递 3 个 参数 : 一 个 HTTP 请 求 方法 (例如 "GET"、"P0ST" 或 "HEAD" )、 服 务 器 
上 一 个 文件 的 URL 和 一 个 布尔 值 ， 这 个 布尔 值 告诉 服务 器 请 求 是 否 异 步 〈 也 就 是 说 ， 我 们 是 
否 会 等 待 请 求 完 成 )。 

O 最 后 ， 我 们 用 send() 发 送 刚才 创建 的 请 求 。 如 果 要 请 求 poST， 就 传递 这 里 给 出 的 参数 。 

7. else { 

document.getElementById("updateArea").innerHTML = "Sorry, but I couldn't create an 
XMLHttpRequest"; 
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如 果 执 行 到 这 里 ， 那 么 就 说 明 由 于 某 种 原因 无 法 创建 XMLHttpRequest， 所 以 除了 输出 错误 消息 之 
外 ， 没 什么 事 儿 可 做 了 。 
8. if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
现在 到 了 showContents()PKZKrP, readyState 属性 可 能 是 几 个 值 之 一 ( 见 表 13-2 )， 而 且 每 当 服 
务 器 改变 它 的 值 时 ， 就 会 触发 showContents() 函 数 。 但 是 ， 在 请 求 完 成 之 前 ， 我 们 实际 上 不 希望 执行 
任何 操作 ( 至 少 在 这 里 不 做 什么 )， 所 以 首先 检查 readyState 是 否 等 于 4。 如果 是 ， 就 可 以 继续 执行 ， 
检查 请 求 返 回 的 是 什么 。 























表 13-2 readyState 属 性 值 
值 意 x 
0 未 初始 化 。 对 象 不 包含 数据 
1 正在 加 载 。 对 象 当前 正在 加 载 它 的 数据 
2 已 经 加 载 。 对 象 已 经 完成 了 数据 加 载 
3 
4 


























交互 式 的 。 即 使 对 象 还 未 完全 加 载 完 ， 用 户 也 可 能 与 对 象 进行 交互 
完成 。 对 象 已 经 完成 了 初始 化 





首先 要 检查 的 是 请 求 的 状态 ， 即 服务 器 返回 的 状态 码 〈 对 于 请 求 的 每 个 文件 ， 服 务 器 都 会 在 幕后 
返回 这 些 编码 ， 但 是 浏览 器 只 在 出 现 错误 时 显示 它们 )。 例 如 ， 状 态 码 200 意味 着 一 切 正常 ， 这 里 的 
状态 就 是 服务 器 调用 返回 的 状态 ;如果 请 求 的 文件 不 存在 ， 就 会 从 Web 服务 器 得 到 404 错误 。 
9. if (xhr.responseXML && xhr.responseXML.childNodes.length > 0) { 
var outMsg = getText(xhr.responseXML.getElementsByTagName("choices")[0]); 
} 
else { 
var outMsg = xhr.responseText; 
} 
如 果 执 行 到 这 里 ， 就 意味 着 一 切 正 常 ， 我 们 要 查看 服务 器 实际 上 提供 了 什么 。 我 们 可 以 读 取 的 文 
件 有 两 种 类 型 ， 所 以 需要 检查 返回 的 数据 类 型 。 如 果 数 据 是 XML responseXML 属性 就 包含 数据 。 然 
Ij, responseXML 属性 也 包含 不 是 XML 的 数据 。 如 果 responseXML.ChildNodes.length KFA (ME 
包含 多 个 虚拟 对 象 ), 那么 我 们 就 知道 已 经 得 到 了 一 个 具有 适当 格式 的 DOM 对 象 , 可 以 使 用 以 前 见 过 
的 命令 ( 比如 getElementsByTagName() ) 来 遍历 它 的 节点 。 但 是 在 这 里 ,我 们 只 想 试 试 那 种 方法 ， 将 
其 结果 传递 给 getText() 函 数 。 返 回 的 值 保存 在 outMsg 中 。 
如 果 得 到 的 数据 不 是 有 效 的 XML , 那么 它 就 是 文本 文件 。 在 这 种 情况 下 , 我 们 将 xhr 的 responseText 
属性 放 到 outMsg 中 。 
10. else ( 
var outMsg = "There was a problem with the request " + xhr.status; 
) 
如 果 返 回 了 200 之 外 的 其 他 状态 码 , 就 是 出 了 问题 , 所 以 设置 outMsg 来 指出 错误 , 并且 附加 上 状 
态 错误 ， 让 用 户 能 够 判断 出 了 什么 问题 。 
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11. document. getElementById("updateArea").innerHTML = outMsg; 
最 后 ， 将 outMsg 输出 到 屏幕 ， 见 图 13-2. 


pean Sr) [eem [esi amici 


My First Am Sept * My First Ajm Senpt * 





* dropbomserontent com B- esto * rer amer m B- pesto 





Four score and seven years ago our fathers brought forth on this continent, a new natioa, conceived in Liberty AlabamaAL AlaskaAK ArizonaAZ ArkansasAR CaliforniaCA ColoradoCO ConnecticutCT DelawareDE 
and dedscated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing FloridaFL GeorgiaGA HawsiiHI IdaholD IllincislL IndianalN lowalA KansasKS KerruckyK Y Louisianal A 
whether that nation. or any nation wo conceived and vo dedicated, can long endure We are met on a great MaineME MarylandMD Massachusetts MA MichiganMI MinnesotaMN MisssssippiMS MissouriMO 
Vtibe- fich] of that war We lave « ot oon. of dus (sch), as a Cmal vesting place fos dwse who MoetanaMT NebraskaNE NevadaNV New HampshireNH New JerseyNJ New MenscoNM New YorkNY North 
here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. But, in a CarolinaNC North DakotaND OhioOH OklahomaOK OregonOR PennsylvaniaPA Rhode IslandR] South 
crate -- we can not hallow ~ this ground. The brave men. CarolinaSC South DakotaSD TennesseeTN Texas TX UtahUT Vermont VT Virginia VA Washington WA West 
living and dead, who struggled here, have consecrated it, far above oor poor power to add or detract. The world Virginia WV Wisconsin WI Wyoming WY 
will little note. nor long remember what we say here, but it can never forget what they did here. It is foe ws the 
thus far so nobly 

he inier fac wa fo be hate dedic iid io dia gest iis mining before e us — that from these honored. 
take increased devotion to that cause for which they gave the last full measure of devotion — that we bere 
highty resolve that these dead shall not have deed in vain - ‘es this nation, under God, shall have a new bath of 
freedom -- and that government of the people, by the people. for the people, shall not perish from the earth 


























图 13-2 单 击 链接 就 会 获得 万 底 斯 堡 演讲 的 文本 文件 ER ) 
或 者 美国 各 州 名 称 和 缩写 的 XML 文件 ( 右 图 ) 





12. if (inVal.textContent) { 
return inVal.textContent; 
} 
return inVal.text; 
这 就 是 getText(), 其 作用 是 检查 所 有 传人 的 参数 是 否 包 含 textContent 属性 。 如 果 包 含 ， 就 返回 
textContent, ， 否 则 返回 其 text 属性 。 

V 提示 

O 由 于 Ajax 的 工作 方式 ， 在 进行 开发 和 测试 时 ， 要 读 取 的 文件 必须 驻 留 在 服务 器 上 ， 它 们 不 能 

是 本 地 文件 。 

O 在 步骤 5 中 我 们 说 过 ,IE 5.5 &I IE 6 使 用 ActiveX 控件 创建 XMLHttpRequest 对 象 。 好 在 IE 7 
有 了 本 机 对 象 ， 所 以 不 再 需要 ActiveX 控件 了 。 但 是 ， 这 意味 着 必须 先 检 查 本 机 对 象 是 否 存 
在 一 一 如 果 先 检查 window.ActiveXObject, 那么 IE7 及 以 上 版 本 也 会 通过 这 个 测试 , 所 以 会 进 
入 错误 的 代码 路 径 。 许 多 在 TE 7 发 布 之 前 编写 的 Ajax 代码 都 有 这 个 问题 。 

口 如 果 需 要 进一步 检查 实际 获得 的 微软 ActiveX 对 象 的 版 本 ， 那 么 可 以 使 用 下 面 的 代码 片段 : 


if (window.ActiveXObject) { 


try { 
xhr = new ActiveXObject("Msxm12.XMLHTTP") ; 






































} 
catch (e) { 
try { 
xhr = new ActiveXObject ("Microsoft.XMLHTTP") ; 


j 
catch (e) ( ) 


这 个 方法 首先 尝试 使 用 XMLHttpRequest 对 象 的 TE 6 版 本 ( Msxml2.XMLHTTP )， 如 果 找 不 到 这 
个 对 象 版 本 , 就 尝试 老 版 本 。 但 是 ,Microsoft.XMLHTTP 应 该 会 提供 PC 上 可 用 的 最 新 版 本 ， 
所 以 我 们 只 在 本 章 中 使 用 这 样 的 代码 一 一 因为 老 代 码 最 终 会 废弃 的 。 
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O Ajax 调用 的 缺点 之 一 是 它们 可 能 被 缓存 。 也 就 是 说 ， 应 用 程序 看 似 与 服务 器 进行 通信 并 且 获 
得 新 数据 , 但 是 它 实际 上 只 是 查看 以 前 读 取 的 数据 。 如 果 是 这 种 情况 , 设置 请 求 首部 会 有 帮助 。 
添加 以 下 请 求 首部 可 以 迫使 服务 器 提供 最 新 数据 : 


xhr.setRequestHeader("If-Modified-Since", "Wed, 15 Jan 1995 01:00:00 GMT"); 
xhr.setRequestHeader("Cache-Control","no-cache"); 
xhr.setRequestHeader("Cache-Control", "must-revalidate") ; 
xhr.setRequestHeader("Cache-Control","no-store"); 
xhr.setRequestHeader("Pragma","no-cache"); 
xhr.setRequestHeader("Expires","0"); 


口 通过 覆盖 MIME 类 型 ， 可 以 迫使 调用 返回 XML 数据 : 
xhr.overrideMimeType("text/xml") ; 


但 是 ， 对 于 某 些 浏览 器 和 配置 ， 这 可 能 会 造成 问题 ， 所 以 要 谨慎 使 用 。 
13.3 ”解析 服务 器 数据 


既然 已 经 从 服务 器 获得 了 数据 ， 我 们 就 需要 找到 所 需 的 信息 ， 并 且 确 保 它 采用 的 格式 是 Ajax 应 
用 程序 可 以 使 用 的 。 为 此 ,首先 需要 检查 信息 。 因 为 数据 是 结构 良好 的 XML 文档 , 脚本 可 以 在 XML 
文档 树 中 移动 ， 寻 找 并 且 提 取 所 需 的 数据 ， 然 后 将 数据 存储 在 变量 中 。 如 果 需 要 ， 脚 本 还 可 以 对 数据 
进行 重新 格式 化 以 备 后 期 使 用 。 

HTML 和 CSS 很 简单 ， 分 别 见 脚本 13-5 和 脚本 13-6， 所 以 只 需 看 看 JavaScript 文件 〈 脚本 
13-7 ) 中 的 代码 。 对 于 这 个 示例 ，XML 文件 是 关于 存储 在 Flickr 上 的 照片 的 数据 。XML 的 一 部 
分 见 脚本 13-8。 


脚本 13-5 ”只 需 添加 一 些 JavaScript 代码 ， 这 个 简单 的 HTML 页 面 就 会 更 引 人 注 目 


<!DOCTYPE html> 

<html> 

<head> 
<title>My Second Ajax Script</title> 
<link rel-"stylesheet"href-"scriptO2.css"» 
<script src="script02.js"></script> 




































































</head> 
<body> 
<div id="pictureBar"> </div> 
</body> 
</html> 
脚本 13-6 ”只 需 少 量 CSS 代码 ， 就 足以 改善 页 面 的 外 观 
ing { 


border-width: 0; 
margin: 5px; 





脚本 13-7 这 个 脚本 中 增加 的 JavaScript 代码 可 以 对 前 面 请 求 的 数据 进行 解析 


window.addEventListener("load",initAll, false); 
var xhr = false; 











function initAll() { 





264 第 13 章 Ajax 简介 





if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 
} 
else { 
if (window.ActiveXObject) { 
try { 
xhr = new ActiveXObject ("Microsoft.XMLHTTP") ; 


} 
catch (e) { 
} 


} 
} 


if (xhr) { 
xhr.addEventListener("readystatechange", showPictures, false); 
xhr.open("GET", "flickrfeed.xml", true); 
xhr.send(null); 


} 
else { 
alert("Sorry, but I couldn't create an XMLHttpRequest"); 
} 
} 


function showPictures() { 
var tempText = document.createElement ("div") ; 
var theText 


if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
var allImages = xhr.responseXML.getElementsByTagName(" content") ; 


for (var i=0; i«allImages.length; i++) { 
tempText.innerHTML = getPixVal(allImages[i]); 


theText- tempText.getElementsByTagName ("p") [1] . innerHTML; 
theText = theText.replace(/240/g,"75"); 

theText = theText.replace(/180/g,"75"); 

theText = theText.replace(/_m/g,"_s"); 

document .getElementById("pictureBar").innerHTML += theText; 


tou 


} 
} 
else { 
alert("There was a problem with the request 


} 


+ xhr.status); 


} 


function getPixVal(inVal) { 
return (inVal.textContent) ? inVal.textContent : inVal.text; 
} 
} 


脚本 13-8 这 是 Flickr 提供 的 XML 文件 的 简化 版 本 ， 原 来 的 文件 大 约 有 500 £1 


<?xml version="1.0" encoding-"utf-8" standalone-"yes"?» 
«feed xmlns-"http://www.w3.0rg/2005/Atom" 
xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:flickr-"urn:flickr:"xmlns:media-"http://search. 
yahoo.com/mrss/"» 














<title>Content from Paradise Ridge Sculpture Grove</title> 
«link rel-"self" href-"http://api.flickr.com/services/feeds/photoset.gne?set-721576009765241758amp; 
nsid=23922109@NOO&amp; lang=en-us" /> 
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<link rel="alternate" type="text/html" href="http://www.flickr.com/photos/dorismith/sets/ 
*72157600976524175"/> 

<id>tag:flickr.com,2005:http://www.flickr.com/photos/23922109@N00/sets/72157600976524175</id> 

«icon»http://farm2.static.flickr.com/1335/882568164 72eee9b41f s.jpg«/icon» 

<subtitle>The &lt;a href-&quot;http://www.paradiseridgewinery.com/&quot;&gt;Paradise Ridge Winery&lt; 
»/a&gt; not only has great wines, but they also have a sculpture garden. We visited on 22 July 2007. 
»</subtitle> 

<updated>2007-07-24T05 :19:08Z</updated> 

<generator uri="http://www. flickr.com/">Flickr</generator> 


<entry> 

«title»IMG 0045.JPG«/title» 

«link rel-"alternate" type-"text/html" href-"http://www.flickr.com/photos/dorismith/882590644/in/ 
'set-72157600976524175/"/» 

<id>tag: flickr.com, 2005: /photo/882590644/in/set-72157600976524175</id> 

«published»2007-07-24T05:19:08Z«/published» 

«updated»2007-07-24T05:19:08Z«/updated» 

«dc:date.Taken»2007-07-22T13:42:49-08:00«/dc:date.Taken» 

«content type-"html"»&lt;p8gt;&lt;a href-&quot;http://www.flickr.com/people/dorismith/8quot;8gt; 
Dori Smith&lt;/a&gt; posted a photo:&lt;/p&gt;&lt;p8gt;&lt;a href-&quot;http://www.flickr.com/ 
*photos/ dorismith/882590644/&quot ; title=&quot ; IMG_0045.JPG&quot ;&gt;&lt;img src-&quot; 
http: //farm2.static. flickr. com/1063/882590644_5a4a0d89f3_m.jpg&quot; width=&quot ; 240&quot ; 
'height-8&quot;1808quot; alt=&quot;IMG_0045.IPG&quot; /&gt ;&1lt; /a&gt;&1lt; /pagt; 


</content> 

<author> 
«name»Dori Smith</name> 
<uri>http: //www. flickr.com/people/dorismith/</uri> 

</author> 

«link rel-"enclosure" type-"image/jpeg" href="http://farm2.static. flickr.com/1063/ 
882590644 5a4a0d89f3 m.jpg" /> 


«category term-"winery" scheme-"http://www.flickr.com/photos/tags/" /» 

«category term-"sonomacounty" scheme-"http://www.flickr.com/photos/tags/" /» 

«category term-"sculptures" scheme-"http://www.flickr.com/photos/tags/" /» 

«category term-"dorismith" scheme-"http://www.flickr.com/photos/tags/" /» 

«category term-"paradiseridge" scheme-"http://www.flickr.com/photos/tags/" /» 

«category term-"paradiseridgesculptures" scheme-"http://www.flickr.com/photos/tags/" /» 

«/entry» 
«entry» 

«title»IMG 0032.JPG«/title» 

«link rel-"alternate" type-"text/html" href-"http://www.flickr.com/photos/dorismith/882568164/in/ 
'set-72157600976524175/" /» 

<id>tag: flickr.com, 2005: /photo/882568164/in/set-72157600976524175</id> 

«published»2007-07-24T05:15:14Z«/published» 

«updated»2007-07-24T05:15:14Z«/updated» 

«dc:date.Taken»2007-07-22T13:35:09-08:00«/dc:date.Taken» 

«content type-"html"»&lt;p8gt;&lt;a href-&quot;http://www.flickr.com/people/dorismith/8quot;8gt; 
‘Dori Smith&lt;/a&gt; posted a photo:8lt;/p8gt;&lt;p&gt;8lt;a href=&quot ;http://www. flickr.com/ 
*photos/ dorismith/882568164/8quot; title=&quot ; IMG_0032.IJPG&quot;&gt;&lt;img src=&quot; 
^http://farm2.static. flickr.com/1335/882568164 72eee9b41f m.jpg&quot; width=&quot ; 240&quot ; 
*height= &quot;180&quot ;alt=&quot ; IMG_0032.IJPG&quot; /&gt;&1lt; /a&gt; alt; /pagt; 


</content> 
<author> 
«name»Dori Smith</name> 
<uri>http: //www. flickr.com/people/dorismith/</uri> 
</author> 
«link rel-"enclosure"type-"image/jpeg"href-"http://farm2.static.flickr.com/1335/ 
882568164 72eee9b41f m.jpg" /> 
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«category term-"winery" scheme="http://www. flickr.com/photos/tags/" /> 

«category term-"sonomacounty" scheme-"http://www.flickr.com/photos/tags/" /» 

«category term-"sculptures" scheme-"http://www.flickr.com/photos/tags/" /» 

«category term-"dorismith" scheme-"http://www.flickr.com/photos/tags/" /» 

«category term-"paradiseridge" scheme-"http://www.flickr.com/photos/tags/" /» 

«category term-"paradiseridgesculptures" scheme-"http://www.flickr.com/photos/tags/" /> 
«/entry» 


«/feed» 


> 解析 来 自 服务 器 的 信息 








1. xhr.addEventListener("readystatechange", showPictures, false); 
xhr.open("GET", "flickrfeed.xml", true); 
每 当 readyState 发 生变 化 时 , 我 们 希望 调用 showpictures() 函 数 。 我 们 要 从 服务 器 读 取 的 文件 名 
是 人 ickrfeed.xml。 这 些 都 在 这 里 进行 设置 。 
2.var tempText = document.createElement("div"); 





var theText 

showPictures() 中 的 这 些 代 码 执行 实际 工作 。 我 们 首先 创建 变量 来 存储 两 个 元 素 : tempText 和 
theText ( 都 是 临时 的 占 位 符 div )。 

3. var allImages = xhr.responseXML.getElementsByTagName("content") ; 

服务 器 发 送 回 的 响应 包含 XML ， 所 以 可 以 获取 响应 并 寻找 每 个 内 容 节点 。 如 果 看 一 下 脚本 13-8 
中 的 XML ， 会 看 到 其 中 有 许多 我 们 根本 不 感 兴趣 的 东西 。 实 际 上 ， 我 们 需要 的 只 是 <a> 标 签 中 的 内 容 
(其 实 只 需要 其 中 的 一 半 )。 所 以 ， 我 们 首先 缩小 要 处 理 的 内 容 范 围 。 

4. for (var i=0; i«allImages.length; i++) { 

现在 ， 需 要 对 找到 的 所 有 节点 执行 循环 ， 找 出 我 们 需要 的 实际 数据 。 

5. tempText.innerHTML = getPixVal(allImages[i]); 

调用 getPixVal() (后 面 详 述 ) 获得 第 i 个 <content> 节 点 的 内 容 。 

因为 我 们 已 经 得 到 了 XML 数据 ， 所 以 可 以 使 用 它 的 textContent 属性 (也 可 能 是 text 属性 ) 获 
得 节点 的 文本 。 我 们 希望 找到 其 中 的 所 有 段落 一 一 应 该 有 两 个 段落 。 

6. theText= tempText.getElementsByTagName("p")[1].innexHTML; 

theText = theText.replace(/240/g,"75"); 
theText = theText.replace(/180/g,"75"); 
theText = theText.replace(/ m/g," s"); 

正如 前 面 提 到 的 ， 我 们 只 需要 一 半 <a> 节 点 ， 所 以 要 去 掉 不 需要 的 那些 。 在 一 个 包含 20 张 照片 信 
息 的 文件 中 ， 就 有 20 个 <content> 节 点 ， 每 个 节点 包含 两 个 段落 。 每 个 <content> 贡 点 包含 摄影 师 的 姓 
名 (链接 到 他 们 的 Flickr 页 面 ), 然后 是 一 个 图 像 ， 它 链接 到 Flickr 保存 的 版 本 。 我 们 只 需要 后 者 ， 所 
以 只 获取 theText 第 二 个 段落 中 的 innerHTML， 也 就 是 段落 中 的 ca>( 以 及 其 中 包含 的 cimg> 标 签 )。 

接 下 来 ， 使 用 正则 表达 式 修改 结果 。Flickr 发 送 给 我 们 的 是 中 等 大 小 图 像 的 标签 ， 但 是 我 们 只 
需要 缩 略 版 本 。 因 为 我 们 的 图 像 要 么 是 240x180 (水 平 的 )， 要 么 是 180x240 ( 垂直 的 )， 缩 略图 总 
是 75x75， 所 以 只 需 把 文本 中 的 所 有 240 或 180 改 为 5。 最 后 ， 修 改 图 像 名 本 身 。Flickr 中 等 大 小 
图 像 的 名 称 以 _m 结尾 ， 小 图 像 以 s 结尾 ， 所 以 要 把 _m 替换 为 _s。 
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7. document.getElementById("pictureBar").innerHTML += theText; 
在 这 个 循环 中 ， 把 修改 后 的 节点 附加 到 HTML 页 面 的 pictureBar 中 。 最 终结 果 见 图 13-3 ， 这 个 
页 面 上 的 每 个 缩 略图 都 链接 到 全 尺寸 版 本 。 
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图 13-3 这些 缩 略图 是 从 Flickr 读 取 的 





















8. return (inVal.textContent) ? inVal.textContent : inVal.text; 
既然 我 们 已 经 有 了 XML 数据 , 就 可 以 使 用 它 的 textContent ( 视 具体 情况 也 可 能 是 text ) 属性 得 
到 节点 的 文本 。 这 是 getPixVal() 函 数 的 全 部 内 容 , 基本 上 与 脚本 13-2 的 getText() 一 样 , 只 不 过 这 里 
用 了 另 一 种 语法 。 参 见 第 2 章 补 充 内 容 “ 不 存在 唯一 正确 的 方式 ”。 
V 提示 
口 尽管 不 能 读 取 存 储 在 男 一 个 服务 器 上 的 数据 文件 (关于 这 种 情况 的 原因 , 请 参见 后 面 的 补充 内 
容 “获得 数据 ” )， 但 是 可 以 让 HTML. 文件 从 另 一 个 服务 器 加 载 信息 。 网 页 无 论 在 什么 地 方 ， 
都 能 够 显示 来 自 Flickr 服务 器 的 图 像 。 
O Web 网 站 的 优点 之 一 是 , 它们 理解 人 们 希望 访问 不 只 是 他 们 自己 的 数据 , 而 且 包 括 别 
人 的 数据 ( 如 果 数 据 的 主人 同意 将 数据 公开 的 话 )。 例如， 可 以 在 Flickr 上 搜索 所 有 包含 夏 威 
夷 和 日 落 的 照片 ， 然 后 以 XML 文件 的 形式 返回 结果 。 将 此 功能 与 这 个 脚本 或 下 一 个 脚本 结合 
在 一 起 ， 就 可 以 在 页 面 上 显示 最 新 的 照片 。 












































获得 数据 
当 人 们 第 一 次 听 说 Ajax 时 , 最 想 做 的 事情 之 一 是 ,用 JavaScript 读 取 各 种 XML 文件 ( 包括 RSS 
和 Atom 提要 )， 重 新 组 合 它 们 ， 然 后 将 结果 放 在 自己 的 网 页 上 。 
不 好 的 地 方 是 : 这 种 方式 有 一 点 儿 限 制 只 能 读 取 它 所 在 的 服务 器 上 的 文件 。 如 果 你 稍 
微 考虑 一 下 ， 就 会 明白 这 是 为 什么 : 如 果 肢 本 能 够 读 取 任何 文件 ， 那 么 就 会 出 现 各 种 安全 隐患 和 假 
冒 的 站 点 。 
好 的 一 面 在 于 : 可 以 让 服务 器 上 的 程序 定期 运行 ,获得 一 个 XML 文件 ， 然 后 将 它 存储 在 本 地 。 
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在 此 之 后 ，Ajax 应 用 程序 就 可 以 读 取 它 。 在 这 个 示例 和 下 一 个 示例 中 ， 假 设 已 经 运行 了 某 个 程序 ， 
它 定 期 获取 所 选择 的 Flickr 数据 文件 ， 并 且 将 它 保存 在 你 自己 的 服务 器 上 。 但是， 具体 做 法 超出 了 
本 书 的 范围 。 

更 棒 的 是 ,在 菜 些 情况 下 可 以 使 用 目标 服务 器 本 身 驻 留 的 脚本 ,脚本 可 以 读 取 自己 服务 器 上 的 
文件 ， 然 后 把 结果 返回 给 用 户 。 我 们 稍 后 就 会 看 到 一 个 示例 。 


13.4 刷新 服务 器 数据 


我 们 的 Ajax 应 用 程序 已 经 从 服务 器 获得 了 信息 ， 然 后 解析 数据 并 且 对 数据 进行 操作 。 现 在 ， 我 
们 要 演示 如 何 让 应 用 程序 从 服务 器 获得 数据 的 新 版 本 ， 然 后 自动 地 刷新 页 面 。 脚 本 13-9 包含 必要 的 
JavaScript 代码 。 
脚本 13-9 使 用 这 个 脚本 自动 地 刷新 服务 器 信息 


window.addEventListener("load",initAll, false); 
var xhr = false; 























function initAll() { 
if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 


} 
else { 
if (window.ActiveXObject) { 
try { 
xhr = new ActiveXObject ("Microsoft .XMLHTTP") ; 


} 
catch (e) { 
} 


} 
} 


if (xhr) { 
getPix(); 


} 
else { 
alert("Sorry, but I couldn't create an XMLHttpRequest"); 


} 


function getPix() { 
xhr.open("GET", "flickrfeed.xml", true); 
xhr.addEventListener("readystatechange", showPictures, false); 
xhr.send(null); 


setTimeout(getPix, 5 * 1000); 


function showPictures() { 
var tempText = document.createElement ("div") ; 


if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
var allImages = xhr.responseXML.getElementsByTagName("content") ; 
var randomImg = Math.floor(Math.random() * allImages.length); 
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tempText.innerHTML = getPixVal(allImages[randomImg]) ; 
var thisImg = tempText.getElementsByTagName("p")[1]; 
document.getElementById("pictureBar").innerHTML = thisImg.innerHTML; 


else ( 
alert("There was a problem with the request " + xhr.status); 


} 


function getPixVal(inVal) { 
return (inVal.textContent) ? inVal.textContent : inVal.text; 


} 


> 刷新 服务 器 信息 








1. function getPix() { 
xhr.open("GET", "flickrfeed.xml", true); 
xhr.addEventListener("readystatechange", showPictures, false); 
xhr.send(null); 


setTimeout(getPix,5 * 1000); 
) 
前 面 的 脚本 在 initAl1() 中 进行 xhr 调用 ， 而 这 个 脚本 将 它 放 在 单独 的 函数 getPix() 中 。 而 且 ， 
增加 了 setTimeout() 调 用 。 在 脚本 获得 一 个 随机 图 像 之 后 5 秒 ， 它 会 再 次 获取 图 像 。 
2. var randomImg = Math.floor (Math.random() * allImages.length) ; 





tempText.innerHTML = getPixVal(allImages[randomImg]) ; 
var thisImg = tempText.getElementsByTagName("p")[1]; 
与 前 一 个 示例 中 进行 的 循环 不 同 ,这 次 我 们 只 想 要 一 个 随机 图 像 。 首先 , 像 4.10 节 中 那样 ,使 用 
Math.random() 和 Math.floor() 计 算出 一 个 零 到 图 像 数 量 减 1 的 随机 数 。 之 后 ， 使 用 这 个 随机 数 作为 
allImages 数组 的 索引 ， 获 得 getPixVal() 函 数 的 精确 节点 。 
3. document.getElementById("pictureBar").innerHTML = thisImg.innerHTML; 
现在 我 们 获得 一 个 图 像 ， 然 后 将 这 个 图 像 放 进 网 页 ( 见 图 13-4 )。 
[Firefox >] >] =) Ea TI ULLAM HIT 
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图 13-4 ”这 个 脚本 一 幅 接 一 幅 地 显示 图 像 
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v 提示 

O 你 可 能 会 觉得 奇怪 : 这 个 脚本 为 什么 每 次 都 读 取 同 一 个 XML 文件 。 如 果 这 个 文件 没有 改动 ， 
那么 为 什么 不 直接 使 用 第 一 次 获得 的 变量 中 的 数据 ? 如 果 你 还 记得 13.3 节 补 充 内 容 “ 获 得 数 
据 ” 中 提 到 的 技术 ， 就 会 意识 到 XML 文件 随时 都 可 能 发 生 改 动 。 假 设 你 的 服务 器 端 程序 每 几 
分 钟 创建 一 次 XML 文件 的 新 版 本 ， 为 什么 用 户 需 要 等 待 才能 看 到 最 新 的 照片 呢 ? 这 样 ， 用 户 
就 能 及 时 地 看 到 它们 。 

口 如 果 采 用 刚才 提 到 的 方式 , 就 很 可 能 遇 到 本 章 前 面 提 到 的 Ajax 缺点 : 缓存 。 不 同 的 浏览 器 (以 
及 不 同 的 版 本 和 平台 ) 都 有 自己 独特 的 缓存 机 制 , 通过 修改 前 面 讨论 的 请 求 首部 ,可 以 解决 大 
多 数 浏 览 器 (不同 版 本 、 不 同 平台 ) 的 缓存 机 制 。 许 多 人 推荐 的 男 一 个 解决 方案 是 将 GET 改 为 
POST。 我 们 发 现 男 一 个 方法 也 是 有 效 的 : 不 同 于 脚本 13-2， 我 们 在 脚本 13-9 中 兑换 了 open() 
和 addEventListener 的 次 序 。 


13.5 ”从 服务 器 获得 数据 


正如 前 面 补 充 内 容 “ 获 得 数据 ”中 提 到 的 ，Ajax 可 以 限制 读 取 数 据 的 位 置 。 毕 竟 ， 你 不 希望 世界 
上 的 每 个 人 都 能 够 读 取 你 的 任何 文件 ， 不 是 吗 ? 但 是 有 时 候 ， 公 司 希 望 别人 读 取 文件 ， 这 样 就 能 够 在 
他 们 自己 的 网 站 上 创建 自己 的 内 容 。 例 如 ，Flickr( 见 前 面 的 示例 ) 允许 你 的 服务 器 获得 他 们 的 XML 
文件 ， 然 后 你 可 以 用 这 些 文件 做 任何 事情 。 

但 是 有 时 候 ， 你 无 法 获得 对 服务 器 的 访问 权 , 所 以 Flickr 以 另 一 种 格式 提供 这 些 文件 : JSON ( 读 
音 类 似 人 名 Jason )。 这 个 示例 的 关键 之 处 在 HTML 文件 中 ( 见 脚本 13-10), JavaScript 文件 ( 见 脚本 
13-11) 只 是 使 用 它 。 


脚本 13-10 ”这 个 示例 的 关键 之 处 是 在 HTML. 页 面 中 添加 远程 脚本 标签 


<!DOCTYPE html> 

<html> 

<head> 
<title>Using JSON Data</title> 
<link rel="stylesheet"href="script02.css"> 
<script src-"script04.js"»«/script» 
<script src="http://api.flickr.com/services/feeds/photoset.gne?nsid=23922109@NOO0&set= 
—72157600976524175&format=json"></script> 

</head> 

<body> 
<div id="pictureBar"> </div> 

</body> 

</html> 





























































































































脚本 13-11 JavaScript 文件 缩短 了 ， 因 为 大 多 数 工 作 由 远程 服务 器 完成 


window. addEventListener("load", initAl1, false); 
var imgDiv = ""; 


function initAll() { 
document. getElementById("pictureBar").innerHTML = imgDiv; 
} 


function jsonFlickrFeed(flickrData) { 





for (var i=0; i<flickrData.items.length;i++) { 
imgDiv += "<img src='"; 
imgDiv += flickrData.items[i].media.m.replace(/_m/g,"_s"); 
imgDiv += "' alt='" + flickrData.items[i].title + "'>"; 
} 
} 





=> 读 取 和 解析 服务 器 数据 








1. «script src-"http://api.flickr.com/services/feeds/photoset.gne?nsid-239221098N008set- 
*721576009765241758&8format-json"»«/script» 

我 们 在 前 面 说 过 ， 脚 本 只 能 读 取 它 所 在 的 服务 器 上 的 文件 。 这 个 规则 仍然 有 效 ， 但 是 这 并 不 意味 
着 不 能 调用 另 一 个 服务 器 上 的 脚本 文件 。 在 这 个 示例 中 ,这 个 脚本 放 在 api.flickr.com 服务 器 上 ， 因 此 
它 可 以 读 取 这 个 服务 器 上 的 数据 。 

2. document.getElementById("pictureBar").innerHTML = imgDiv; 

在 JavaScript 文件 中 ， 这 行 代 码 在 加 载 时 把 所 有 图 像 放 到 页 面 上 ， 见 图 13-5. 








eoo Using JSON Data 
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图 13-5 ”不 但 能 够 从 Flickr MARS ar SAMAR, IE REIRI OEE T TET A S E 











3. function jsonFlickrFeed(flickrData) { 

现在 , 你 肯定 想 知 道 设置 图 像 的 代码 在 哪儿 , 这 是 另 一 个 关键 之 处 : 这 些 代码 主要 在 数据 文件 ( 见 
脚本 13-12) 中 。 数 据 文件 包含 JavaScript 能 够 理解 的 代码 ,采用 ISON 格式 。 在 这 个 示例 中 ， 数 据 文 
件 假设 要 寻找 一 个 名 为 jsonFlickrFeed() 的 函数 ， 所 以 我 们 在 这 里 创建 这 个 函数 。 通 过 参数 传递 的 是 
存储 数据 本 身 的 位 置 。 


4. for (var i=0; i«flickrData.items.length; i++) { 











imgDiv += "<img src= 
imgDiv += TE E E A E 
imgDiv += "' alt='" + flickrData.items[i].title + "'>"; 
} 
因为 数据 已 经 采用 JavaScript 能 够 理解 的 格式 ,所 以 不 需要 再 做 很 多 工作 ,在 这 里 ,我 们 遍历 items 
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数组 中 的 所 有 图 像 , 构造 一 个 将 在 屏幕 上 显示 (〈 步 又 2 ) 的 文本 字符 串 。items 中 的 每 个 元 素 包含 关于 
一 个 图 像 的 各 种 信息 , 但 是 我 们 只 需要 URL, 这 一 信息 存储 在 media.m 中 。 然 后, 使 用 正则 表达 式 把 
中 等 大 小 的 图 像 转 换 为 缩 略 图 。 


脚本 13-12 JSON 文件 的 片段 。 注 意 ， 它 的 大 小 约 是 XML 文件 的 一 半 ，, 但 是 包含 相同 的 数据 


jsonFlickrFeed({ 

"title": "Content from Paradise Ridge Sculpture Grove", 

"link": "http://www. flickr.com/photos/dorismith/sets/72157600976524175", 

"description": "The &lt;a href=&quot ;http: //www. paradiseridgewinery.com/&quot;&gt;Paradise Ridge 
Winery&lt;/a&gt; not only has great wines, but they also have a sculpture garden. We visited on 22 
‘July 2007.", 

"modified": "2007-07-24T05:19:08Z", 

"generator": "http://www.flickr.com/", 

"items": [ 

{ 

"title": "IMG 0045.JPG", 

"link": "http://www. flickr.com/photos/dorismith/882590644/in/set-72157600976524175/", 

"media": ("m":"http://farm2.static.flickr.com/1063/882590644 5a4a0d89f3 m.jpg"], 

"date taken": "2007-07-22T13:42:49-08:00", 

"description": "&lt;p&gt;&lt;a href=&quot ;http: //www. flickr.com/people/dorismith/&quot ; &gt ; 
‘Dori Smith&lt;/a8gt; posted a photo:&lt;/p&gt; &lt;p&gt;8lt;a href=&quot ;http: //www. flickr.com/ 
photos/dorismith/882590644/8quot; title=&quot;IMG_0045.IPG&quot;&gt;&lt;img src=&quot; 
http://farm2.static.flickr.com/1063/882590644 5a4a0d89f3 m.jpg&quot; width=&quot ; 240&quot ; 
height=&quot ;180&quot; alt-&quot;IMG 0045.JPG&quot;/8gt;&1t;/a8gt;&lt;/p&gt; ", 

"published": "2007-07-24T05:19:08Z", 

"author": "nobody@flickr.com (Dori Smith)", 

"author id": "239221098NO00", 

"tags": "winery sonomacounty sculptures dorismith paradiseridge paradiseridgesculptures" 











"title": "IMG 0032.JPG", 

"link": "http://www. flickr.com/photos/dorismith/882568164/in/set-72157600976524175/", 

"media": ("m":"http://farm2.static.flickr.com/1335/882568164 72eee9b41f m.jpg"], 

"date taken": "2007-07-22T13:35:09-08:00", 

"description": "&lt;p&gt;&lt;a href=&quot ;http: //www. flickr.com/people/dorismith/&quot ;&gt; 
"Dori Smith&lt;/a8gt; posted a photo:&lt;/p&gt; &lt;p&gt;&lt;a href=&quot; http://www. flickr.com/ 
'photos/dorismith/882568164/8quot; title=&quot; IMG_0032.IPG&quot;&gt;&lt;img src=&quot; 
http: //farm2.static. flickr .com/1335/882568164_72eee9b41f_m. jpg&quot; width=&quot ; 240&quot ; 
^height-8quot;1808quot; alt=&quot;IMG_0032.JPG&quot; /&gt;&lt;/a&gt;&lt;/pagt; ", 

"published": "2007-07-24T05:15:14Z", 

"author": "nobody@flickr.com (Dori Smith)", 

"author id": "239221098NO00", 

"tags": "winery sonomacounty sculptures dorismith paradiseridge paradiseridgesculptures" 


}) 

V 提示 

口 我 们 在 第 10 章 介绍 对 象 字 面 量 时 介绍 过 JSON。JSON 格式 本 身 是 对 象 字面 量 的 一 个 子 集 。 如 

果 你 不 熟悉 JSON， 可 以 回顾 那 一 节 。 

O 不 必 总 是 使 用 步骤 1 中 的 URL。 实 际 上 ， 如 果 这 样 做 ， 只 会 得 到 与 这 个 页 面 完 全 相同 的 结果 。 
Flickr 允许 以 许多 组 合 方式 使 用 标签 、 集 和 组 ， 这 样 就 会 得 到 个 性 化 的 结果 。 访 问 Flickr， 找 
到 符合 期 望 的 网 页 ， 在 这 个 页 面 上 找到 提要 (feed) 地 址 。 然 后 ， 只 需 在 URL 的 末尾 加 上 
&format=json， 就 能 够 得 到 想 要 的 结 
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口 第 3 步 中 函数 的 男 一 个 名 称 是 回调 。 只 要 我 们 将 代码 放 至 正确 命名 的 回调 函数 中 , 它 就 会 正常 
运行 , 但 哪怕 是 名 称 稍 有 差别 ， 都 不 会 正常 运行 。 


13.6 FA Ajax 预览 链接 
现在 的 许多 站 点 常常 采用 一 种 方便 的 视觉 效果 : 当 用 户 将 鼠标 指针 移动 到 链接 上 时 , 链接 的 目标 


页 面 上 的 前 几 行 就 会 出 现在 鼠标 指针 下 的 浮动 窗口 中 ( 见 图 13-6 )。 这 是 一 个 非常 容易 创建 的 Ajax 应 
用 程序 。HTML 见 脚本 13-13, CSS 见 脚本 13-14, JavaScript 见 脚本 13-15。 
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K 13-6 AE BUR E EDER ERE, AAEE at 
上 的 HTML 文件 ,并且 在 预览 窗口 中 显示 文件 的 前 几 行 


脚本 13-13 ”预览 示例 的 HTML 页 面 


<!DOCTYPE html» 
<html> 
<head> 
<title>Previewing Links</title> 
<link rel="stylesheet" href="script05.css"> 
<script src="script05.js"></script> 
</head> 
<body> 
<h2>A Gentle Introduction to JavaScript</h2> 
<ul> 
<li><a href-"jsintro/2000-08.html"»August column«/a»«/li» 
<li><a href-"jsintro/2000-09.html"»September column«/a»«/li» 
<li><a href-"jsintro/2000-10.html"»October column«/a»«/li» 
<li><a href-"jsintro/2000-11.html"»November column«/a»«/li» 
</ul> 
<div id="previewWin"> </div> 
</body> 
</html> 


脚本 13-14 这 个 CSS 设置 预览 弹出 窗口 的 样式 


#previewWin { 
background-color: #FF9; 
width: 400px; 
height: 100px; 
font: .8em arial, helvetica, sans-serif; 
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padding: 5px; 

position: absolute; 
visibility: hidden; 
top: 10px; 

left: 10px; 

border: 1px #CCO solid; 
clip: auto; 

overflow: hidden; 


} 


#previewWin hi, #previewWin h2 { 
font-size: 1.0em; 
} 


脚本 13-15 ”这 个 JavaScript 进行 服务 器 请 求 并 且 显 示 弹 出 窗口 


window. addEventListener("load", initAl1, false); 
var xhr = false; 
var xPos, yPos; 





function initAll() { 
var alllinks = document.getElementsByTagName("a"); 


for (var i-0; i« allLinks.length; i++) { 
allLinks[i].addEventListner("mouseover", getPreview, false) ; 


} 
} 
function getPreview(evt) { 
if (evt) { 
var url = evt.target; 
} 
else { 
evt = window.event; 
var url = evt.srcElement; 
} 
xPos = parseInt(evt.clientx) ; 


yPos = parseInt(evt.clientY); 


if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 


} 
else { 
if (window.ActiveXObject) { 


try { 
xhr = new ActiveXObject ("Microsoft .XMLHTTP") ; 


} 
catch (e) { 
} 


} 
} 


if (xhr) { 
xhr.addEventListener("readystatechange" ,showContents, false); 
xhr.open("GET", url, true); 
xhr.send(null); 

} 

else { 
alert("Sorry, but I couldn't create an XMLHttpRequest"); 

} 
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} 


function showContents() { 
var prevWin = document. getElementById("previewWin") ; 


if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
prevWin.innerHTML = xhr.responseText; 


else { 
prevWin.innerHTML = "There was a problem with the request " + xhr.status; 


prevWin.style.top = yPos+2 + "px"; 
prevWin.style.left = xPos+2 + "px"; 
prewWin.style.visibility = "visible"; 


prevWin.addEventListener("mouseout", function(){prevWin.style.visibility = "hidden";}, flase); 
} 
} 


> 使 用 Ajax 预览 链接 


1. var allLinks = document.getElementsByTagName("a"); 
for (var i=0; i« allLinks.length;i++) { 
allLinks[i] .addEventListener("mouseover" , getPreview, false); 
} 

这 是 initAll()MAWAA, CADEA, FFA ERE MER. EUS onmouseover 
事件 处 理 程 序 。 这 个 事件 处 理 程序 将 〈 你 下 面 将 看 到 的 ) 读 取 目标 页 面 并 且 向 〈 可 能 的 ) 访问 者 
显示 预览 。 

2. if (evt) { 

var url = evt.target; 
} 
else { 

evt = window.event; 

















var url = evt.srcElement; 


} 
xPos = parseInt(evt.clientX); 
yPos = parseInt(evt.clientY); 


在 getPreview() 中 ,首先 需 要 查 明 要 读 取 哪个 文件 ， 这 就 要 查看 事件 的 属性 。 根 据 访问 者 使 用 的 
浏览 器 不 同 ，URL 保存 在 evt .target 或 window.event.srcElement 中 。 获得 了 URL 之 后 ,就 可 以 获得 
鼠标 的 x 和 y 位 置 供 以 后 使 用 。 


3. var prevWin = document.getElementById("previewWin"); 











if (xhr.readyState -- 4) ( 
使 用 Ajax 读 取 文件 之 后 ,现在 进入 了 showContents () RZL Fe Tf previewwin 元 素 存储 在 prevWin 
中 以 备 后 用 。 当 xhr.readystate 为 4 时 ， 就 该 显示 预览 了 。 
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4. if (xhr.status == 200) { 
prevWin.innerHTML = xhr.responseText; 


} 
else { 


prevWin.innerHTML = "There was a problem with the request " + xhr.status; 


} 


prevWin.style.top = yPos+2 + "px"; 
prevWin.style.left = xPos+2 + 

"px"; 

prevWin.style.visibility = "visible"; 


prevWin.addEventListener("mouseout", function(){prevWin.style.visibility="hidden" ;},flase); 


如 果 一 切 正常 ， 那 么 xhr.status 为 200， 而 且 我 们 希望 放 在 prevWin.innerHTML 中 的 数据 已 经 存 








在 于 xhr.responseText 中 了 。 如 果 出 现 了 问题 ， 就 在 prevWin.innerHTML 中 放 一 个 错误 消息 。 











在 此 之 后 ， 需 要 查 明 要 在 哪里 显示 预览 窗口 ， 也 就 是 当前 的 鼠标 x 和 y 4 














E 标 。 这 个 窗口 是 一 个 弹 


出 窗口 ， 所 以 将 它 放 在 触发 该 调用 的 当前 鼠标 位 置 向 下 和 向 右 一 点 儿 的 地 方 (向 下 和 向 右 各 2 像素 )。 




















最 后 ,将 prevWin 设置 为 可 见 ,并 且 让 JavaScript 知道 , 24 RIAA 


V 提示 














F 预 览 窗口 时 ,应 该 隐藏 prevNin。 


口 读 取 的 数据 是 HTML 格式 的 。 将 xhr.responseText 放 进 innerHTML 就 会 告诉 浏览 器 ， 当 显示 
预览 窗口 时 , 它 应 该 将 这 里 的 内 容 解 释 为 HTML。 如 果 希 望 显 示 别 的 东西 (例如 , 希望 看 到 页 
面 的 实际 源 代码 )， 那 么 可 以 在 显示 预览 之 前 修改 innerHTML 中 的 内 容 。 








O Ajax 要 求 被 读 取 的 文件 驻 留 在 同一 服务 器 上 ,但 是 不 要 求 在 同一 目录 中 。 女 
在 男 一 个 目录 中 ,而 且 页 面包 含 相对 链接 ,那么 这 些 链 接 将 不 起 作用 。 女 
文件 、 图 像 或 JavaScript， 那 么 不 能 预览 文件 的 这 些 部 分 。 对 此 可 以 采 月 

















显示 之 前 修改 prewin. innerHTML. 


13.7 ”自动 补 全 表单 字段 





























帮助 站 点 访问 者 的 一 种 非常 好 的 方法 是 ， 降 低 在 字段 




















果 要 读 取 的 页 面 


I3 




















[0 果 页 面 引 用 某 个 CSS 
同样 的 解决 方案 : 在 














' 输 入 数据 的 复杂 性 。 帮 助 用 户 填写 具有 大 





量 选 项 的 表单 ， 从 而 帮助 他 们 节省 时 间 和 精力 ， 还 有 助 于 向 站 点 提供 有 效 的 数据 。 

例如 ， 当 用 户 在 一 个 表单 字段 中 输入 内 容 时 ， 脚 本 13-16 (HTML )、 脚 本 13-17 (CSS ) 和 脚本 
13-18 ( JavaScript ) 会 显示 与 输入 的 字母 匹配 的 美国 州 名 列表 ( 见 图 13-7 )。 随 着 
这 个 列表 会 逐渐 缩短 ， 直 到 只 留 下 一 个 州 名 。 然 后 ， 这 个 州 名 就 会 自动 地 放 进 输入 字段 中 ， 列 表 也 会 

















消失 。 





脚本 13-16 ”这 个 简单 的 HTML 提供 将 进行 自动 补 全 的 表单 字段 


<!DOCTYPE html» 
<html> 
<head> 
<title>Auto-fill Form Fields</title> 
<link rel="stylesheet" href="script06.css"> 











j 户 输入 更 多 的 字母 ， 
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<script src="script06.js"></script> 
</head> 
<body> 
<form action="#"> 
Please enter your state:<br> 
<input type="text" id-"searchField" autocomplete-"off"»«br» 
<div id="popups"> </div> 










</form> 
</body> 
</html> 
[Firefox >| 73 lem [Firefox * | EN mE 
Auto-fill Form Fields Lė 7 Auto-fill Form Fields lil 
é dropboxuserconter 4 P? + f D- é dropboxuserconter C P + A D- 
Please enter your state: Please enter your state: 


new 


New Hampshire 







New Mexico 











图 13-7 随 着 输入 更 多 字母 ， 可 能 的 选择 数量 逐渐 减少 
脚本 13-17 这 个 CSS 为 搜索 字段 和 弹出 菜单 设置 样式 


body, #searchfield { 
font: 1.2em arial, helvetica, sans-serif; 
} 


.Suggestions { 
background-color: #FFF; 
padding: 2px 6px; 
border: 1px solid #000; 











} 


.suggestions:hover { 
background-color: #69F; 





} 
#popups { 

position: absolute; 
} 


#searchField.error { 
background-color: #FFC; 
} 


脚本 13-18 这 个 JavaScript 处 理 服 务 器 请 求 和 弹出 列表 的 显示 


window. addEventListener("load", initAl11, false); 
var xhr = false; 
var statesArray = new Array(); 


function initAll() { 
document. getElementById("searchField").addEventListener("keyup", searchSuggest, false); 
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if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 


} 
else { 
if (window.ActiveXObject) { 
try { 
xhr = new ActiveXObject ("Microsoft.XMLHTTP") ; 


} 
catch (e) { 
} 


} 
} 


if (xhr) { 
xhr.addEventListener("readystatechange", setStatesArray, false); 
xhr.open("GET", "us-states.xml", true); 
xhr.send(null); 


else ( 
alert("Sorry, but I couldn't create an XMLHttpRequest"); 
} 
} 


function setStatesArray() { 
if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
if (xhr.responseXML) { 
var allStates = xhr.responseXML.getElementsByTagName("item") ; 
for (var i-0; i«allStates.length; i++) { 
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild; 
} 
} 


} 
else { 
alert("There was a problem with the request " + xhr.status); 
} 
} 
} 


function searchSuggest() { 
var str = document.getElementById("searchField").value; 
document. getElementById("searchField").className = ""; 
if (str != "") { 
document .getElementById("popups").innerHTML = ""; 


for (var i=0; i<statesArray.length;i++) { 
var thisState = statesArray[i].nodeValue; 


if (thisState.toLowerCase().indexOf(str.toLowerCase())-- 0) { 
var tempDiv = document.createElement ("div"); 
tempDiv.innerHTML = thisState; 
tempDiv.addEventListener("click",makeChoice, false); 
tempDiv.className - "suggestions"; 
document. getElementById("popups") .appendChild(tempDiv) ; 

} 


} 
var foundCt = document.getElementById("popups").childNodes. length; 


if (foundCt == 0) ( 
document.getElementById("searchField").className -"error"; 
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} 
if (foundCt == 1) { 
document. getElementById("searchField").value = document.getElementById("popups") .firstChild.innerHTM.; 


document.getElementById("popups").innerHTML = ""; 


} 
} 
function makeChoice(evt) { 
if (evt) { 
var thisDiv = evt.target; 
} 
else { 
var thisDiv = window.event.srcElement; 
} 
document. getElementById("searchField").value = thisDiv.innerHTML; 
document .getElementById("popups").innexHTML = ""; 
} 


> 建立 自动 补 全 表单 字段 


1. Please enter your state:<br> 
<input type="text" id="searchField" autocomplete="off"><br> 








<div id="popups"> </div> 
这 是 我 们 要 注意 的 HTML 代码 。 其 中 的 特殊 之 处 是 autocomplete 属性 。 它 告诉 浏览 器 不 要 在 这 
个 字段 上 执行 任何 自动 补 全 ， 因 为 我 们 将 用 脚本 处 理 自 动 补 全 。 
2. document. getElementById("searchField").addEventListener("keyup", searchSuggest, false); 
为 了 捕捉 和 处 理 每 次 击 键 ， 需 要 一 个 事件 处 理 程序 ， 这 是 在 initAl1() 中 设置 的 。 
3. xhr.addEventListener("readystatechange", setStatesArray, false); 
xhr.open("GET", "us-states.xml", true); 
xhr.send(null); 
与 本 章 前 面 的 那些 照片 不 同 ， 美 国 的 州 名 不 太 可 能 发 生变 化 。 我 们 可 以 只 读 取 XML 文件 ( 见 脚 
本 13-4 ) 一 次 ， 对 数组 进行 初始 化 ， 并 且 可 靠 地 假设 列表 在 这 次 会 话 结束 之 前 一 直 是 有 效 的 。 
4. if (xhr.responseXML) { 
var allStates = xhr.responseXML.getElementsByTagName(" item"); 
for (var i-0; i«allStates.length; i++) { 
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild; 


} 


} 
我 们 在 这 里 读 取 文 件 , 查看 每 个 iten 节点 ,寻找 其 中 的 label 节点 ,并 且 存 储 label 的 firstChild 


( 州 名 本 身 )。 每 个 州 名 存储 在 statesArray 数组 中 的 一 个 元 素 中 。 
5. var str = document.getElementById("searchField").value; 
document.getElementById("searchField").className - ""; 
当 开 始 在 字段 中 输入 内 容 时 ， 就 会 执行 searchsuggest() 事 件 处 理 程序 中 的 代码 。 首 先 获 得 
searchField 的 值 ， 也 就 是 到 目前 为 止 已 经 输入 的 信息 。 接 下 来 ， 清 空 这 个 字段 的 class 属性 。 
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6.if (str !- "") { 
document.getElementById("popups").innerHTML = ""; 
如 果 还 没有 输入 任何 信息 ， 就 不 做 任何 事 ， 所 以 在 这 里 进行 检查 ， 确 保 用 户 已 经 输入 了 某 个 值 ， 
然后 再 弹出 可 能 值 的 列表 。 如 果 已 经 输入 了 某 些 信息 ， 就 清空 以 前 的 可 能 值 列 表 。 


7. for (var i=0; i«statesArray.length; i++) ( 















































var thisState - statesArray[i].nodeValue; 

现在 ,遍历 州 名 的 列表 ， 并 且 将 当前 查看 的 州 名 存储 在 thisstate 中 。 

8. if (thisState.toLowerCase().indexOf(str.toLowerCase()) == 0) { 

我 们 希望 检查 用 户 到 目前 为 止 输 入 的 内 容 是 否 是 某 个 州 名 的 一 部 分 一 一 但 是 仅仅 这 样 还 不 够 ,我 
们 还 必须 确保 输入 的 内 容 位 于 州 名 的 开头 。 毕 竟 ， 如 果 输 入 了 Kansas ， 你 并 不 希望 下 拉 框 中 显示 
Arkansas 或 Kansas。 另 外 ,在 进行 这 项 检查 时 ， 还 在 检查 indexof() 之 前 确保 两 个 字符 串 都 是 小 写 的 。 

如 果 indexof() 返 回 0 (也 就 是 说 ， 在 thisState 的 开头 位 置 处 找到 了 输入 的 字符 串 )， 那 么 我 们 
就 知道 找到 了 一 个 匹配 。 

9. var tempDiv = document.createElement("div"); 

tempDiv.innerHTML - thisState; 


tempDiv.addEventListener("click" ,makeChoice, false); 












































tempDiv.className = "suggestions"; 
document . getElementById("popups").appendChild(tempDiv); 
因为 这 个 州 名 是 一 个 可 能 值 ， 我 们 和 希望 将 它 添加 到 要 显示 的 列表 中 。 实 现 方法 是 ， 创 建 一 个 临时 
的 div， 将 它 的 innerHTML 设置 为 这 个 州 名 ， 添 加 click 处 理 程序 和 className， 然 后 将 整个 div 追加 
到 popups div 中 。 将 每 个 州 名 作为 单独 的 div 添加 ， 这 样 我 们 就 能 够 使 用 JavaScript 和 CSS 操作 每 个 
州 名 。 
10. var foundCt = document.getElementById("popups").childNodes.length; 
当 遍 历 完 所 有 州 名 之 后 , 我 们 要 建立 弹出 窗口 一 一 但 是 我 们 得 到 了 多 少 个 州 名 呢 ?” 这 里 就 计算 这 
“MEL: foundCt, 
11. if (foundCt == 0) { 
document.getElementById("searchField").className = "error"; 
} 
如 果 foundCt 是 0， 就 说 明 用 户 输 入 了 错误 的 内 容 。 我 们 将 className 设置 为 error， 从 而 让 用 户 
知道 输入 错 了 ， 这 一 设置 会 使 输入 字段 显示 浅黄 色 背 景 (这 由 脚本 13-17 中 的 CSS 样式 规则 控制 )。 
12. if (foundCt == 1) { 
document.getElementById("searchField").value = document.getElementById("popups"). 
>firstChild. innerHTML; 
document.getElementById("popups").innerHTML = ""; 
} 
WR foundct AE 1， 我 们 就 知道 找到 了 唯一 的 匹配 ， 所 以 可 以 将 这 个 州 名 放 进 字段 。 如 果 用 户 已 
经 输入 了 ca， 他 们 就 不 需要 再 输入 lifornia， 因 为 我 们 已 经 知道 了 他 们 要 输入 哪个 州 名 。 我 们 使 用 
popups 中 唯一 的 div 填写 输入 字段 ， 从 而 自动 地 提供 完整 的 州 名 ， 然 后 清空 popups div. 
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13. function makeChoice(evt) { 


if (evt) { 
var thisDiv = evt.target; 
} 
else { 
var thisDiv = window.event.srcElement; 
} 


document.getElementById("searchField").value = thisDiv.innerHTML; 
document.getElementById("popups").innerHTML = ""; 
) 
输入 州 名 的 另 一 种 方法 是 ， 单 击 弹出 列表 中 的 一 个 州 名 。 在 这 种 情况 下 ， 会 调用 makeChoice() 事 件 
处 理 程序 。 首 先 ， 我 们 通过 检查 事件 的 目标 ， 查 明 用 户 单 击 了 哪个 州 名 ， 这 会 提供 一 个 特定 的 div. # 
看 这 个 div 的 innerHTML 会 提供 州 名 ， 我 们 将 这 个 州 名 放 进 输入 字段 。 最 后 ， 清 空 可 能 值 的 弹出 列表 。 
V 提示 
口 在 使 用 Google Instant 时 ,你 会 看 到 这 种 技术 的 示例 。 当 你 在 看 似 普通 的 Google 搜索 字段 中 进 
行 输入 时 ,会 显示 一 个 弹出 列表 ， 其 中 显示 搜索 结果 。 随 着 输入 的 进行 ,列表 中 的 搜索 结果 会 







































































被 不 断 过 滤 。 
口 你 可 能 会 注意 到 ， 除 了 演示 Ajax, XML 和 服务 器 端 技术 之 外 ， 这 个 示例 和 前 一 个 示例 还 花费 














了 许多 时 间 和 精力 来 使 效果 更 美观 。 这 是 因为 ， 许 多 被 认为 是 Ajax ( 至 少 有 一 部 分 人 这 么 认 
为 ) 的 东西 不 但 涉及 底层 技术 , 而 且 涉 及 这 些 技术 的 表现 方式 。 接 下 来 几 章 的 目标 是 使 这 些 技 
术 的 应 用 更 加 简单 。 
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到 目前 为 止 ， 本 书 中 已 经 多 次 出 现 图 像 翻转 器 示例 了 。 但 你 有 没有 想 过 ， 如 果 图 像 的 _on 版 本 不 
存在 会 发 生 什么 ?结果 如 图 13-8 所 示 。 脚 本 13-19 所 示 的 代码 ， 在 创建 翻转 器 之 前 使 用 Ajax 查看 该 


图 像 的 男 一 个 版 本 是 否 存 在 。 














eoo0 | Three-state Rollovers 
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di.dropboxusercontent.com/u/2127486/jsvqs9/ch04/next2.html 


图 13-8 如果 图 像 的 翻转 器 版 本 不 存在 ， 我 们 会 看 到 一 个 图 像 无 法 显示 的 图 标 
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脚本 13-19 图像 翻转 带 脚 本 示例 最 终 


window. addEventListener("load", rolloverInit, false); 
var rolloverFound; 


function rolloverInit() { 


for (var 


i=0; i«document.images.length; i++) { 


if (document. images[i].parentNode.tagName.toLowerCase() == "a") { 
setupRollover(document.images[i]); 


) 
} 
} 


function setupRollover(theImage) { 


var re - 


/Ns* offNs*/; 


rolloverFound = false; 
if (theImage.src.indexOf(" off")) { 
findImage(theImage.src.replace(re," on")); 


if (!rolloverFound) { 


return; 
} 
theImage.outImage = new Image(); 
theImage.outImage.src = theImage.src; 
theImage.addEventListener("mouseout",function() {this.src = this.outImage.src;}, false); 
theImage.overImage = new Image(); 
theImage.overImage.src = thelmage.src.replace(re," on"); 
theImage.addEventListener("mouseover",function() {this.src = this.overImage.src;}, false); 
theImage.clickImage = new Image(); 
theImage.clickImage.src = theImage.src.replace(re," click"); 
theImage.addEventListener("click",function() {this.src = this.clickImage.src;}, false); 
theImage.parentNode.childImg = theImage; 
theImage.parentNode.addEventListener("blur", function() {this.childImg.src = this.childImg.outImage. 
src;), false); 
theImage.parentNode.addEventListener("focus", function() {this.childImg.src = this.childImg.overImage. 
src;}, false); 


} 


function findImage(url) { 
if (window.XMLHttpRequest) { 


xhr = 


} 
else { 


new XMLHttpRequest () ; 


if (window.ActiveXObject) { 
try { 


xhr = new ActiveXObject ("Microsoft.XMLHTTP") ; 


} 
catch (e) { 
} 


} 
} 


if (xhr) 


{ 


xhr.addEventListener("readystatechange", picExists, false); 
xhr.open("GET", url, false); 
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xhr.send(null); 


} 


function picExists() { 
if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
rolloverFound = true; 
} 
} 
} 


> 检查 文件 是 否 存在 








1. window.addEventListener("road",rolloverInit,false); var rolloverFound; 
我 们 需要 一 个 全 局 变量 ， 它 的 作用 是 一 旦 发 现 有 效 的 翻转 器 _on 图 像 就 进行 标记 ， 因 此 我 们 在 一 
开始 就 创建 了 rolloverFound 变量 。 
2. rolloverFound = false; 
if (theImage.src.indexOf(" off")) { 


findImage(theImage.src.replace(re," on")); 





} 

if (!rolloverFound) { 
return; 

J 





这 里 展示 的 是 setupRollover KAUN T ERRA FRH rolloverFound 的 默认 值 为 
false。 接 下 来 检查 网 像 的 URL 是 否 包 含 _off， 如 果 不 包含 ， 直 接 证 明了 这 是 个 无 效 的 翻转 器 。 如 果 
包含 ， 那 么 我 们 还 要 看 一 下 _on 版 本 是 否 存在 ,检查 由 后 面 的 findImage() 函 数 实现 。 

当 我 们 返回 的 时 候 ， 如果 rolloverFound 依然 是 false, 立即 返回 并 跳 过 函数 的 其 他 部 分 。 因 此 不 
会 创建 翻转 器 ， 这 就 导致 总 是 显示 _off 图 像 ， 如 图 13-9 所 示 。 









































eoo Three-state Rollovers 
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di.dropboxusercontent.com/u/2127486/jsvqs9/ch13/next2.html 


Al 13-9 ”只 是 通过 一 个 快速 的 Ajax 查找 ， 就 避免 了 UI 问题 





























3. if (xhr) { 
xhr.addEventListener("readystatechange" , picExists, false); 


xhr.open("GET", url, false); 
xhr.send(null); 
} 
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findImage() 函 数 中 的 代码 是 很 标准 的 xhr 请 求 ， 不 过 有 一 点 区 别 : 要 传递 给 xhr.open() 的 最 后 一 
个 参数 是 false。 这 就 相当 于 告诉 服务 器 请 求 是 同步 的 ， 也 就 是 说 ,在 获得 返回 结果 之 前 ， 不 能 继续 。 
还 好 ， 整 个 检查 不 会 花费 太 长 时 间 。 
4. function picExists() { 
if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
rolloverFound = true; 


} 





} 
最 后 ,检查 图 片 是 否 真 实 存 在 。 如 果 存 在 ，xhr.readysState 是 4， 而 xhr.status 是 200 一 一 这 时 
就 可 以 将 rolloverFound 设置 为 true 了。 
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一 件 事 我 们 之 前 一 直 没 有 提起 : 编写 JavaScript 应 用 程序 并 非 易 事 。 一 般 而 言 ， 它 要 求 程序 员 
掌握 大 量 的 DOM、CSS JavaScript 和 服务 器 资源 方面 的 知识 。 本 书 的 受众 是 初级 脚本 程序 员 ， 
因此 我 们 介绍 了 一 些 简单 易 懂 的 知识 ， 以 便 使 读者 感觉 学 习 这 些 知识 是 力所能及 的 。 不 过 , 许多 图 书 完全 
面向 中 高 级 脚本 程序 员 ， 介 绍 如 何 创建 JavaScript 应 用 程序 ， 而 本 书 中 的 章节 无 法 替代 那 种 深入 探讨 。 
那么 ， 这 是 和 否 意味 着 如 果 你 尚未 成 为 脚本 编程 高 手 ， 就 无 法 在 自己 的 网 站 中 善 用 JavaScript 呢 ? 
完全 不 是 ! 本 章 将 向 你 展示 如 何 利 用 JavaScript 工具 包 : 借助 已 经 预先 编写 好 的 库 和 函数 框架 ， 你 会 在 
项 目 实践 中 真切 地 感受 到 脚本 编程 的 强大 。 
目前 有 许多 工具 包 可 供 下 载 ， 而 且 大 部 分 都 是 免费 的 。 本 书 选 用 了 可 免费 下 载 且 开源 的 实用 程序 
和 控件 集 jQuery (jquery.com ) "来 构建 交互 式 Web 应 用 程序 。 我 们 认为 它 是 最 出 色 的 JavaScript 库 之 
一 。 在 接 下 来 的 几 章 中 , 我 们 将 介绍 如 何 使 用 jQuery 来 拖 放 页 面 元 素 、 添 加 菜单 和 日 历 、 创 建 琶 加 层 
和 排序 表格 数据 ， 总 的 来 说 ， 就 是 利用 jQuery 来 为 网 页 添加 绚丽 实用 的 效果 。 





















































































































































为 什么 选用 jQuery 
无 论 开 发 人 员 有 怎样 的 编程 习惯 ， 总 会 有 与 之 相 适应 的 JavaScript 框架 。 搁 多 话说 ， 库 的 种 类 
千差万别 、 良 劳 不 齐 ， 而 即便 是 顶尖 级 的 库 也 各 有 千秋 。 


jQuery 库 的 优点 如 下 。 
口 轻 量 级 : 与 许多 竞争 者 相 比 ， 它 的 体积 要 小 得 多 ， 也 就 是 说 ,使 用 jQuery 的 网 站 加 载 速度 
更 快 。 





O 活跃 的 开发 社区 : 开发 人 员 有 问题 可 以 在 论坛 上 求助 ， 且 可 以 很 快 得 到 回复 。 另外， 还 可 以 
搜索 社区 文档 资料 ， 查 看 是 否 属 于 常见 问题 。 

O 插件 架构 : 如果 要 使 用 jQuery 中 没有 提供 的 功能 ， 很 可 能 有 人 已 编写 好 一 个 插件 了 。 插 件 
的 另 一 个 好 处 是 ， 只 有 在 需要 的 时 候 才 将 其 添加 到 网 站 中 ， 即 不 必 在 每 个 页 面 中 都 加 载 它 。 
OQ 支持 旧 浏览 器 :如果 需要 支持 IE6~ 相 8, 可 以 使 用 jQuery 1 替代 通常 使 用 的 jQuery 2 ,jQuery 
1 同样 得 到 了 很 好 的 支持 。 

















@ 人 民 邮 电 出 版 社 出 版 的 《精通 jQuery》( 书号 978-7-115-36653-5 ) 是 jQuery 领域 的 标杆 之 作 ， 以 实例 驱动 ， 系 统 
AMV T jQuery, jQuery UI 和 jQuery Mobile: www.ituring.com.cn/book/999., 编者 注 
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14. 


码 仅 


口 速度 : 即使 在 由 其 竞争 者 所 发 起 的 速度 测试 中 ，jQuery 亦 能 胜出 ( 参见 jsperf.com )。 

口 初级 开发 人 员 容 易 掌握 : jQuery 的 选择 查询 基于 CSS, 因此， 非 全 职 专业 程序 员 也 能 轻松 运 
用 jQuery 来 为 其 网 站 添加 功能 ， 使 其 按期 望 的 方式 工作 。 

基于 上 述 理由 ,jQuery 已 成 为 时 下 最 流行 的 JavaScript 框架 之 一 。 





1 添加 jQuery 
为 了 在 网 站 中 使 用 JavaScript 框架 ,你 需要 对 网 站 的 页 面 代 码 作出 一 些 修改 。 使 用 jQuery AY, 4X 


需 少 量 修改 。 
































脚本 14-1 下 面 的 HTML 代码 为 页 面 引 入 了 jQuery Æ 











<!DOCTYPE html» 

<html> 

<head> 
«title»Welcome to jQuery!</title> 
«script src="http://code. jquery.com/jquery-2.1.0.js"></script> 
<script src="script01.js"></script> 

</head> 

<body> 
«hi id="welcome"> </h1> 

</body> 

</html> 


脚本 14-2 —/ BE jQuery 代码 ， 这 只 是 个 开始 


$(document).ready(function() { 
alert("Welcome to jQuery!"); 


DE 


> 在 页 面 中 添加 jQuery Æ 








1. <script src="http://code. jquery.com/jquery-2.1.0.js"></script> 
脚本 14-1 包含 了 这 名 用 于 引入 jQuery PER HTML 代码 。 
2. $(document).ready(function() { 

alert("Welcome to jQuery!"); 


D 
你 可 能 注意 到 了 ， 脚 本 14-2 所 示 的 JavaScript CE AERA Leah. Ae, EXE 


和 下 面 这 段 代码 没 喻 区 别 : 





window. addEventListener("load", 
function(){ 
alert("Welcome to jQuery!"); 


false 
E 
我 们 在 图 14-1 之 前 已 经 见 过 这 段 代 码 很 多 次 了 ， 发 生变 化 的 地 方 如 下 : 
a $() 
在 基于 jQuery 的 JavaScript 代码 中 ， 人 们 首先 注意 到 的 通常 是 美元 符号 $。 一 方面 是 由 于 在 普通 
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JavaScript 代码 中 $ 符 号 并 不 常见 ， 另 一 方面 则 是 因为 $ 符 号 um da 
在 jQuery 中 无 处 不 在 。 大 多 数 用 到 jQuery 的 代码 行 都 会 久 le 

符号 作为 开始 ， 这 行 代 码 也 不 例外 。$ 符 号 仅仅 表示 一 个 合 

法 但 不 常见 的 函数 名 ，jQuery 通过 它 来 获取 所 需 的 一 切 。 

口 document 

因为 我 们 无 论 做 什么 都 需要 通过 $， 那 么 ， 训 无 疑问 应 
该 首先 获取 document 对 象 ( 一般 是 最 顶层 的 元 素 )。 

口 ready() 

以 前 ， 我 们 通过 检查 onload 事件 来 判断 页 面 是 否 完全 
加 载 ,现在 则 依赖 于 jQuery 的 ready() 函 数 。 二 者 唯一 的 区 
别 在 于 onload 是 事件 处 理 程序 (所 以 必须 赋 给 函数 ), 而 P8 14-1 欢迎 来 到 jQuery 的 精彩 世界 
ready() 是 有 一 个 参数 的 函数 。 

V 提示 

C 如 果 你 想 知道 第 1 步 中 HTML 代码 行 的 出 处 ， 请 阅读 补充 内 容 “ 提 供 jQuery”。 

OR jQuery 是 最 轻 量 级 的 JavaScript 框架 之 一 ， 还 是 有 办 法 让 它 变 得 更 “ 轻 ”: FR 
jquery-2.1.0.min.js,， 用 它 来 替换 第 1 步 中 引用 的 jQuery 文件 。 这 个 版 本 的 代码 经 过 了 压缩 进而 
能 够 获取 最 快 下 载 速度 。 
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Read dl.dropboxusercontent.com 
































提供 jQuery 

以 前 ， 如 果 你 想 使 用 JavaScript 框架 (框架 的 另 一 个 名 字 是 “ 库 ”)， 那 么 你 需要 在 自己 的 服务 
器 上 提供 这 些 文件 。 经 常 访问 高 端 网 站 的 网 页 冲浪 者 可 能 在 一 天 之 内 下 载 到 各 不 相同 的 库 中 的 大 部 
分 (或 者 这 些 库 的 多 份 副本 ). 

现在 对 此 有 一 个 解决 方案 : 同 许多 框架 一 样 ， 从 CDN (Content Delivery Network， 内 容 发 布 网 
络 ) 来 获取 jQuery, CDN 上 能 够 提供 菜 个 库 的 多 个 稳定 版 本 ,而 你 可 以 直接 链接 到 上 面 。 这 意味 
着 ， 如 果菜 个 访客 正在 访问 你 的 网 站 ,而 在 当天 ， 他 曾 访问 过 许多 其 他 使 用 jQuery 的 网 站 ， 那 么 ， 
他 的 浏览 器 端 可 能 已 经 缓存 了 所 需 的 库 文件 ， 如 此 一 来 ， 你 的 网 站 访问 速度 之 快 会 让 人 大 吃 一 惊 。 
退 一 步 来 说 ， 即 使 访客 的 浏览 器 端 没 有 缓存 所 需 的 库 文 件 ，CDN 的 因特网 连接 性 也 要 优 于 你 自己 
实现 的 网 站 ， 所 以 CDN 提供 文件 的 速度 会 优 于 你 的 服务 器 。 

对 于 你 而 言 ， 仅 需 对 网 页 做 少量 修改 : 通常 需要 将 HTML 页 面 中 的 

<script src="directory/script.js"> 
修改 为 

<script src="http://code. jquery.com/script.js"» 

你 可 能 对 不 断 改进 的 版 本 感 兴趣 。 写 作 本 书 时 ，jQuery 的 最 新 版 本 为 2.1.0。 如 果 想 获取 此 版 
本 ， 可 将 上 面 的 URL AA 

<script src="http://code. jquery.com/jquery-2.1.0.js"» 

如 何 获取 前 一 个 版 本 ? 
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<script src-"http://code. jquery.com/jquery-2.0.3.js"» 
如 果 要 获取 jQuery 1， 比 方 说 为 了 支持 IE 66—IE 8， 可 以 通过 加 载 下面 的 代码 获取 jQuery 1 4 


最 新 版 。 
<script src-"http://code. jquery.com/jquery.js"» 


(请 谨慎 使 用 ， 这 种 方法 会 让 开发 者 的 Web Mh Ay, Att jQuery 2 不 再 支持 。) 


14.2 ”使 用 jQuery 更 新 页 面 


到 目前 为 止 , 本 书 介绍 的 都 是 如 何 动态 更 新 网 页 ， 当 然 , 用 jQuery 也 能 做 到 。 虽 然 接 下 来 的 示例 
与 前 面 的 示例 类 似 , 但 我 们 将 会 更 新 页 面 本 身 ， 而 不 是 仅 弹 出 警告 框 ， 如 图 14-2 Bro. 























Welcome to jQuery =2! 


全 [c] di.dropboxusercontent.com 9 


Welcome to jQuery! 











图 14-2 现在， 你 可 以 看 到 由 jQuery 生成 的 欢迎 界面 了 

















脚本 14-3 ”我 们 用 来 修改 页 面 DOM 结构 的 jQuery 代码 行 


$(document).ready(function() { 
$("#welcome").append("Welcome to jQuery!"); 


})3 


=> 使 用 jQuery 更 新 页 面 


O $("#welcome").append("Welcome to jQuery!"); 
示例 的 HTML 部 分 与 前 面 类 似 ， 不 再 显示 ， 现 在 ， 焦 点 集中 到 了 脚本 14-3 所 示 的 代码 行 上 。 
类 似 于 获取 document 对 象 ， 使 用 $ 从 页 面 上 获取 元 素 。 现 在 获取 到 了 #welcome 元 素 。 然 后 ， 我 们 
使 用 jQuery 的 append() 函 数 来 设置 元 素 的 innerHTML 属性 。 
V 提示 
O 你 可 能 觉得 #welcome HR CSS， 没 错 ! jQuery 流行 的 原因 之 一 是 它 的 选择 器 与 CSS 中 的 选择 
器 非常 相似 ， 这 样 一 来 ， 偏 重 于 设计 的 开发 人 员 就 可 以 更 快 地 掌握 它 。 

















14.3 ”使 用 jQuery 交互 


前 面 介绍 了 一 些 基础 知识 ， 接 下 来 ， 我 们 将 展示 jQuery 的 强大 功能 。 脚 本 14-4 (HTML )、 脚 本 
14-5 (CSS ) 和 脚本 14-6 ( JavaScript ) 演示 了 如 何 轻 松 地 添加 少量 用 户 交 互 行为 。 
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脚本 14-4 这 个 HTML 页 面 允许 用 户 选择 标题 的 颜色 


<!DOCTYPE html» 
<html> 
<head> 
«title»Welcome to jQuery #3!</title> 
<link rel="stylesheet" href="script03.css"> 
«script src="http://code. jquery.com/jquery-2.1.0.js"></script> 
<script src="script03.js"></script> 
</head> 
<body> 
<h1 id="colorMe">Pick a color</h1> 
<p> 
«a id="red">Red</a> 
«a id="green">Green</a> 
<a id="blue">Blue</a> 
</p> 
</body> 
</html> 


脚本 14-5 有 许多 工作 要 借助 CSS 来 完成 
a( 











display: block; 

float: left; 

padding: 10px; 

margin: 10px; 
font-weight: bold; 
color: white; 
background-color: gray; 


} 


a:hover { 
color: black; 
background-color: silver; 








页 面 上 有 三 个 像 按 钮 一 样 的 链接 ， 分 别 是 红色 、 绿 色 和 蓝 色 。 当 用 户 单 击 其 中 一 个 时 ， 页 面 上 的 
标题 “Pick a color” 会 变 成 相应 选中 的 颜色 ， 如 图 14-3 所 示 。 


eo | @ nttp//d.dropboxus.. JO ~ © || (B Welcometo jQuery #3! 























Pick a color 


司 E 四 























图 14-3 单 击 Red 按钮 会 让 标题 变 成 红色 


脚本 14-6 ”真正 的 变化 只 需 寥寥 儿 行 jQuery 代码 即 可 实现 


$(document).ready(function() { 
$("a").click(function(evt) { 
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$("#colorMe").css({ 
"color": $(this).attr("id") 


evt.preventDefault(); 
D; 
3 


> 添加 用 户 交互 


1. $("a").click(function(evt) { 

此 行使 用 了 jQuery 来 实现 交互 行为 ， 即 当 用 户 刘 
应 的 操作 。 

2. $("#colorMe").css({ 

如 你 所 愿 ， 获 取 页 面 上 id 值 为 colorMe 的 元 素 。 由 于 我 们 想 改变 的 属性 是 CSS 相关 的 , 因而 可 以 
使 用 css() 函数 。 它 需要 一 个 对 象 字面 量 列表 : 包含 在 花 括 号 (0) 中 的 一 串 名 值 对 ， 不 同 的 名 值 对 
有 去 号 分 隔 ， 名 值 对 的 名 称 和 值 之 间 用 冒号 分 隔 。 

3. "color": $(this).attr("id") 
$(this) 元 素 类 似 于 常见 的 this 元 素 ， 它 的 值 取决 于 其 所 处 的 上 下 文 环 境 。 此 时 的 上 下 文 环境 
click 事件 处 理 程序 ， 因 此 ， 我 们 能 够 获得 用 户 刚刚 单 击 过 的 那个 链接 。 

我 们 真正 想 要 获取 的 是 元 素 的 id 值 ， 即 red. green 或 blue。 将 值 作 为 参数 传 给 在 第 3 步 中 仅 设 
置 了 一 个 参数 (属性 名 ) 的 attr() 函 数 。 随 后 ， 值 会 被 存储 为 标题 的 class 属性 的 新 值 ，CSS 会 接收 


新 值 ， 进 而 自动 更 新 标题 颜色 。 











jus 
ru 








和 文档 上 任意 链接 C 即 锚 点 元 素 ) 时 , 会 执行 相 
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其 他 工具 包 

在 20 世纪 90 年代， 动态 HTML 非常 流行 ， 人 们 编写 了 大 量 的 DHTML 工具 包 。 事 实 上 ， 
一 部 分 最 优秀 的 工具 包 是 由 无 固定 职业 的 自由 开发 人 员 在 车 库 里 编写 的 。 后 来 ， 随 着 因特网 爆 
炸 式 地 迅速 发 展 ， 工 具 包 的 作者 们 有 了 固定 的 工作 ， 他 们 遗弃 了 自己 曾经 编写 过 的 工具 包 或 者 
不 再 对 其 进行 维护 。 基 于 此 ， 为 本 书 的 早期 版 本 寻找 合适 的 JavaScript LAER, 我们 颇 有 点 
担心 找 不 到 。 

我 们 之 所 以 在 本 书 中 选择 并 介绍 jQuery 是 因为 它 的 文档 齐全 、 性 能 优异 、 开 源 ， 而 且 还 有 一 
个 庞大 的 开发 者 社区 积极 地 为 其 提供 支持 ， 这 意味 着 在 本 书 的 生命 周期 内 ， 它 基本 上 会 始终 存在 。 
HR, 还 有 很 多 其 他 优秀 的 工具 包 。 其 至 还 有 些 网 站 会 对 不 同 的 工具 包 进 行 打 分 ， 此 类 网 站 中 我 们 
最 欣赏 维基 百科 ， 详 见 http://en.wikipedia.org/wiki/Comparison of JavaScript frameworks. 

在 选择 工具 包 时 ， 最 重要 的 标准 莫 过 于 考察 它 是 否 在 支持 Web 标准 方面 做 得 很 好 。 换 和 名 话说 ， 
工具 包 要 能 够 跨 平台 支持 所 有 的 主流 浏览 器 。 对 我 们 而 言 ， 主 流 浏 览 器 包括 Windows 和 Mac 平台 
上 的 Firefox、Safari、Chrome， 以 及 仅 针对 Windows 平台 的 I 9 及 更 高 版 本 。 此 外 ， 还 有 一 条 标 
准 对 于 考察 工具 包 优 劣 很 重要 ， 即 工具 包 是 否 经 过 全 面 调试 以 及 它 的 文档 是 否 齐全 。 

我 们 建议 你 也 了 解 一 下 下 面 的 这 些 工具 包 ， 它 们 广为人知 、 有 良好 的 技术 支持 、 文 档 齐全 且 在 
各 自 网 站 上 有 大 量 详实 的 示例 可 供 参 考 。 

口 Dojo ( dojotoolkit.org ); 
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口 YUI (developer.yahoo.com/yui/ ); 
口 Prototype ( prototypejs.org ); 


口 Modernizr ( modernizr.com ); 





C MooTools ( mootools.net )。 


144 ”交互 与 更 新 


如 果 前 面 的 示例 没有 让 你 获得 足够 多 的 更 新 信息 ， 也 没有 让 你 感受 到 很 多 互动 ， 那么 接 下 来 的 示 
例会 让 你 有 更 深刻 的 体会 。 现在, 按钮 文本 也 会 随 之 改变 颜色 ， 如 图 14-4 tas, 这 样 ， 用 户 就 能 知道 
自己 的 鼠标 停 在 了 哪个 按钮 上 。 














Pick a color 


= 9 四 


图 14-4” 当 用 户 将 鼠标 停 在 某 个 按钮 上 时 ,会 得 到 相应 的 提示 


你 可 能 已 经 猜测 到 了 ，HTML 部 分 与 前 面 的 示例 相似 ,不 再 袭 述 ; 脚本 14-7 (CSS ) 和 脚本 14-8 
( JavaScript ) 包含 了 所 有 重要 内 容 。 


脚本 14-7 借助 jQuery 完成 更 多 工作 后 ， 我 们 可 以 对 CSS 代码 进行 精简 


a{ 
display: block; 
float: left; 
padding: 10px; 
margin: 10px; 
font-weight: bold; 
color: white; 
background-color: gray; 





























} 
脚本 14-8 ”完成 这 个 任务 仍然 不 需要 太 多 的 jQuery 代码 


$(document).ready(function() { 
$("a").hover(function() { 
$(this).css({ 
"color": $(this).attr("id"), 
"background-color": "silver" 
D; 
D; 


$("a").mouseout(function() { 
$(this).css({ 
"color": "white", 
"background-color": "gray" 
IDE 
5 








$("a").click(function(evt) { 
$("#colorMe").css({ 
"color": $(this).attr("id") 


evt.preventDefault(); 
D; 
3 


> 进一步 增强 交互 和 更 新 








1. $("a").hover(function() { 

AMAR BN CSS 是 无 法 更 新 按钮 状态 的 , 所 以 我 们 需要 使 用 jQuery KEM. jQuery 中 的 hover() 函数 
等 价 于 mouseover。 

2.$(this).css({ 

在 考虑 将 鼠标 悬 停 于 某 个 对 象 上 时 ， 我 们 打算 改变 它 的 一 些 属性 。 即 将 被 修改 的 属性 均 与 CSS 
相关 ， 因 此 我 们 可 以 使 用 css() 函 数 。 

3. "color": $(this).attr("id"), 

"background-color": "silver" 

此 处 ,我们 会 同时 修改 多 个 属性 ， 所 以 需要 传人 一 个 对 象 字 面 量 值 列表 : 一 对 花 括号 “{}” 中 包 
含 的 一 系列 名 值 对 ， 每 个 名 值 对 之 间 用 逗号 “,” 分 隔 ， 每 个 名 值 对 内 部 的 名 字 和 值 之 间 用 冒号 “:” 
分 隔 。 将 对 象 字面 量 列表 传 给 css() 函 数 后 ， 元 素 的 字体 颜色 和 背景 颜色 会 被 重 设 为 传人 的 值 。 

4. $("a").mouseout(function() { 

这 行 代 码 用 于 实现 hover() 的 另 一 半 效 果 : mouseout()。 用 户 的 鼠标 光标 移出 按钮 区 域 后 , 我 们 希 
望 按钮 能 够 恢复 到 初始 的 颜色 。 


5. "color": "white", 





















































"background-color": "gray" 

这 就 是 我 们 最 初 的 按钮 配色 方案 一 一 灰 底 白字 。 

V 提示 

口 如 果 你 想 了 解 更 多 关于 对 象 字面 量 的 相关 知识 ， 可 以 参考 第 10 章 的 内 容 。 

口 你 可 能 想 知 道 是 否 真 的 需要 mouseout() 部 分 的 代码 一 一 毕 竞 , 如果 被 重 置 的 值 是 静态 的 , 能 否 
只 通过 CSS 来 实现 呢 ? 很 可 惜 , 答案 是 否定 的 。 hover() 修 改 了 按钮 的 颜色 后 , 除非 使 用 jQuery 
重 置 ， 否 则 按钮 会 一 直 保持 修改 后 的 颜色 。 


14.5 ”条 纹 表格 


如 果 你 的 网 站 有 大 量 表格 数据 ， 就 应 该 在 表格 中 添加 条 纹 一 一 如 果 没 有 条 纹 ， 就 很 难 阅读 和 理解 
这 些 信息 。 遗 憾 的 是 ， 还 没有 适用 于 所 有 常用 浏览 器 的 实现 条 纹 表格 行 的 CSS 方法 。 在 过 去 ,使 用 
JavaScript 实现 条 纹 表格 行 非常 困难 ， 大 多 数 人 不 愿意 自 找 麻 烦 。 但 是 ， 使 用 jQuery 就 简单 多 了 ， 而 
日 效果 很 好 ， 见 图 14-5。 
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eoo Striped Tables P 
yo Striped Tables Lek 

(4) ©@ di.dropboxusercontent. c 区 图 - coosle Q (m-) (+) [会 | 

Beatles Discography 

(Abpm | xxear | Label | 

Please Please Me 1963 Parlophone 

With The Beatles 1963 Parlophone 

A Hard Day's Night 1964 Parlophone 

Beatles for Sale 1964 Parlophone 

Help! 1965 Parlophone 

Rubber Soul 1965 Parlophone 

Revolver 1966 Parlophone 

Sgt. Pepper's Lonely Hearts Club Band 1967 Parlophone 

Magical Mystery Tour 1967 Capitol 

The Beatles 1968 Apple 

Yellow Submarine 1969 Apple 

Abbey Road 1969 Apple 

Let It Be 1970 Apple 











图 14-5 ”这 个 专辑 列表 具有 交错 的 背景 ， 因 此 很 容易 阅读 
脚本 14-9 这 是 标准 表格 的 HIML， 没 有 任何 内 联 样式 或 内 联 脚本 


<!DOCTYPE html» 
<html> 
<head> 
<title>Striped Tables</title> 
<link rel="stylesheet" href="script05.css"> 
<script src="http://code. jquery .com/jquery-2.1.0.js"></script> 
<script src="script05.js"></script> 
</head> 
<body> 
<hi>Beatles Discography</h1> 
<table> 
<thead> 
<tr> 
<th>Album</th> 
<th>Year</th> 
<th>Label</th> 
</tr> 
</thead> 
<tr> 
<td>Please Please Me</td> 
<td>1963</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
«td»With The Beatles</td> 
«td»1963«/td» 
«td»Parlophone«/td» 
</tr> 
<tr> 
<td>A Hard Day's Night</td> 
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<td>1964</td> 
<td>Parlophone</td> 

</tr> 

<tr> 
<td>Beatles for Sale</td> 
<td>1964</td> 
<td>Parlophone</td> 

</tr> 

<tr> 
<td>Help!</td> 
<td>1965</td> 
<td>Parlophone</td> 

</tr> 

<tr> 
<td>Rubber Soul</td> 
<td>1965</td> 
<td>Parlophone</td> 

</tr> 

<tr> 
<td>Revolver</td> 
<td>1966</td> 
<td>Parlophone</td> 

</tr> 

<tr> 
<td>Sgt. Pepper's Lonely Hearts Club Band</td> 
<td>1967</td> 
<td>Parlophone</td> 

</tr> 

<tr> 
<td>Magical Mystery Tour</td> 
<td>1967</td> 
<td>Capitol</td> 

</tr> 

<tr> 
<td>The Beatles</td> 
<td>1968</td> 
<td>Apple</td> 

</tr> 

<tr> 
<td>Yellow Submarine</td> 
<td>1969</td> 
<td>Apple</td> 

</tr> 

<tr> 
<td>Abbey Road</td> 
<td>1969</td> 
<td>Apple</td> 

</tr> 

<tr> 
<td>Let It Be</td> 
<td>1970</td> 
<td>Apple</td> 

</tr> 

</table> 
</body> 
</html> 
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脚本 14-10 ”将 通过 jQuery 启用 这 些 CSS 代码 


table { 
border-collapse: collapse; 


} 
tr.even { 
background-color: #C2C8D4; 
} 
tr.over { 
background-color: #8797B7; 
} 
td { 
border-bottom: 1px solid #C2C8D4; 
padding: 5px; 
th { 
border-right: 2px solid #FFF; 
color: #FFF; 
padding-right: 40px; 
padding-left: 20px; 
background-color: #626975; 
} 
th.sortUp { 
background: #626975 url(jquery/images/asc.png) no-repeat right center; 
} 
th.sortDown { 
background: #626975 url(jquery/images/desc.png) no-repeat right center; 
} 


脚本 14-11 这 是 在 表格 中 添加 条 纹 所 需 的 所 有 代码 


$(document).ready(function() { 
$("tr").mouseover(function() { 
$(this).addClass("over"); 
25 


$("tr").mouseout(function() ( 
$(this).removeClass("over"); 


5 


$("tr:even") .addClass("even"); 


DE 


这 部 分 代码 起 到 翻转 器 的 作用 : 当 鼠 标 移 动 到 某 一 行 上 时 ， 触 发 tr 的 mouseover. 这 让 jQuery 在 





此 行 中 添加 "over" 类 ， 而 CSS 文件 告诉 浏览 器 应 该 以 另 一 种 颜色 





E 








Y 








示 此 行 ( 见 


图 14-6 )。 














Beatles Discography 
Album ear | Label | 
Please Please Me 1963 Parlophone 
With The Beatles 1963 Parlophone 
A Hard Day's Night 1964 Parlophone 
Beatles for Sale 1964 Parlophone 
Help! 1965 Parlophone 
‘Rubber Soul x 1965 Parlophone 
Revolver 1966 Parlophone 
Sgt. Peppers Lonely Hearts Club Band 1967 Parlophone 
Magical Mystery Tour 1967 Capitol 
The Beatles 1968 Apple 
Yellow Submarine 1969 Apple 
Abbey Road 1969 Apple 

Let It Be 1970 Apple 











图 14-6 “把 鼠标 悬 停 在 某 一 行 上 ， 就 会 突出 显示 该 行 


> 创建 斑马 纹 表格 
1. $("tr").mouseover(function() { 
$(this).addClass("over"); 
35 
脚本 14-9 (HTML 文件 ) 和 脚本 14-10 (CSS 文件 ) 没什么 特殊 之 处 。 唯 一 有 点 古怪 的 地 方 是 ， 
CSS 文件 为 具有 "over" 和 "even" 类 的 表格 行 设置 了 规则 , 但 是 在 HTML 中 没有 设置 这 些 类 ， 因 为 这 项 
工作 是 在 JavaScript 文件 〈 见 脚本 14-11 ) 中 完成 的 。 
2. $("tr").mouseout(function() { 
$(this).removeClass("over"); 
35 
这 些 代码 的 作用 与 前 面 的 相反 : 当 鼠 标 离 开 该 行 时 ， 触 发 它 的 mouseout, ， 删 除 类 属性 "over"。 
3. $("tr:even").addClass("even") ; 
实际 上 , 这 就 是 添加 斑马 纹 所 需 的 所 有 代码 。 因 为 jQuery 理解 奇数 行 和 偶数 行 的 概念 , 所 以 可 以 
证 它 把 所 有 偶数 行 的 类 属性 设置 为 "even"。 又 因为 CSS 中 包含 应 用 于 tr.even 的 规则 ， 所 以 会 自动 设 
置 偶数 行 的 颜色 ， 我 们 根本 不 需要 修改 HTML, 


14.6 ”表格 排序 


具有 条 纹 效果 的 表格 已 经 很 不 错 了 , 但 是 有 时 候 你 希望 站 点 支持 用 户 交 互 。 用 户 可 能 希望 按照 不 同 
的 次 序 对 列 进行 排序 一 一 不 是 按照 年 份 升序 , 而 是 按照 降序 排序 。 也 可 能 希望 按 名 称 或 名 称 的 反 序 排序 。 
jQuery 本 身 并 没有 提供 这 种 功能 ， 所 以 必须 使 用 插件 。 这 个 插件 称 为 tablesorter. 


脚本 14-12 为 了 给 表格 添加 排序 功能 ， 只 需 在 HTML 中 添加 少量 代码 


<!DOCTYPE html» 
«html» 
«head» 
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<title>Sorted Tables</title> 
<link rel="stylesheet" href="script05.css"> 
«script src="http://code. jquery.com/jquery-2.1.0.js"></script> 
<script src="jquery/jquery.tablesorter.js"></script> 
<script src="script06.js"></script> 
</head> 
<body> 
<hi>Beatles Discography</h1> 
«table id-"theTable"» 
«thead» 
<tr> 
<th>Album</th> 
<th>Year</th> 
<th>Label</th> 
</tr> 
</thead> 
<tr> 
<td>Please Please Me</td> 
<td>1963</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
«td»With The Beatles</td> 
«td»1963«/td» 
«td»Parlophone«/td» 
</tr> 
<tr> 
<td>A Hard Day's Night</td> 
<td>1964</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
<td>Beatles for Sale</td> 
<td>1964</td> 
<td>Parlophone</td> 
</tr> 
«tr» 
«td»Help!«/td» 
«td»1965«/td» 
«td»Parlophone«/td» 
</tr> 
<tr> 
<td>Rubber Soul</td> 
<td>1965</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
<td>Revolver</td> 
<td>1966</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
<td>Sgt. Pepper's Lonely Hearts Club Band</td> 
<td>1967</td> 
<td>Parlophone</td> 
</tr> 
<tr> 
<td>Magical Mystery Tour</td> 
<td>1967</td> 
<td>Capitol</td> 
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</tr> 

<tr> 
<td>The Beatles</td> 
<td>1968</td> 
<td>Apple</td> 

</tr> 

<tr> 
<td>Yellow Submarine</td> 
<td>1969</td> 
<td>Apple</td> 

</tr> 

<tr> 
<td>Abbey Road</td> 
<td>1969</td> 
<td>Apple</td> 

</tr> 

<tr> 
<td>Let It Be«/td» 
«td»1970«/td» 
«td»Apple«/td» 

</tr> 

</table> 
</body> 
</html> 


脚本 14-13 最后， 只 需 添加 儿 行 代码 ， 表 格 就 会 具备 排序 功能 和 条 纹 效 果 


$(document).ready(function() { 
$("tr").mouseover(function() { 

$(this).addClass("over"); 

D; 


$("tr").mouseout(function() { 
$(this).removeClass("over"); 


H; 


$("#theTable").tablesorter({ 
sortList:[[1,0]], 

cssAsc: "sortUp", 
cssDesc: "sortDown", 
widgets: ["zebra"] 

5 
35 


> 创建 可 排序 表格 








1. <script src="jquery/jquery.tablesorter.js"></script> 
脚本 14-12 HTML 文件 ) 几乎 与 脚本 14-9 相同 ， 只 有 两 处 改动 : 加 载 另 一 个 脚本 jquery. 
tablesorterjs， 在 表格 中 添加 id 值 为 theTable 的 元 素 。 


2. th.sortUp { 
background: #626975 url(jquery/images/asc.gif)no-repeat right center; 


) 


th.sortDown { 
background: #626975 url(jquery/images/desc.png)no-repeat right center; 


) 
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让 我 们 快速 回顾 一 下 脚本 14-10， 之 前 我 们 跳 过 了 这 两 条 规则 。 这 里 ， 它 们 可 以 起 作用 了 。 它 们 
告诉 浏览 器 不 论 用 户 要 升序 还 是 降序 ， 我 们 都 希望 表 头 能 显示 一 个 合适 朝向 的 箭头 。 

3. $("#theTable").tablesorter({ 

这 是 对 JavaScript 代码 ( 见 脚本 14-13 ) 的 主要 修改 : 告诉 jQuery, 我 们 和 希望 让 用 户 能 够 对 这 个 表 
格 的 内 容 排序 。 这 由 步骤 3 和 步 又 4 实现 。 我 们 选择 id 为 theTable 的 元 素 ( 见 步 又 1) 并 对 它 运 行 
tablesorter() 方 法 。 

4. sortList:[[1,0]], 

cssAsc: "sortUp", 





cssDesc: "sortDown", 
widgets: ["zebra"] 

这 里 使 用 jQuery， 所 以 有 几 个 控制 表格 显示 方式 的 选项 。 我 们 在 这 里 使 用 的 选项 如 下 所 示 。 

Q sortList:[[1,0]]: 在 最 初 加 载 页 面 时 ， 我 们 希望 表格 以 某 种 方式 排序 ( 见 图 14-7 )， 就 在 这 
里 定义 这 种 排序 方式 。 所 需 排序 的 列 是 第 一 个 参数 , 列 的 编号 从 零 开 始 。 在 这 里 ,我们 希望 表 
格 按 照 第 二 列 排 序 ， 所 以 传递 1 GCE, JavaScript 的 编号 是 从 零 开始 的 )。 第 二 个 参数 是 希 
望 的 排序 方向 : 0 是 升序 ，1 是 降序 。 









































Beatles Discography 

EN | Yar v| Label | 
Please Please Me 1963 Parlophone 
With The Beatles 1963 Parlophone 
A Hard Day's Night 1964 Parlophone 
Beatles for Sale 1964 Parlophone 
Help! 1965 Parlophone 
Rubber Soul 1965 Parlophone 
Revolver 1966 Parlophone 
Sgt. Pepper's Lonely Hearts Club Band 1967 Parlophone 
Magical Mystery Tour 1967 Capitol 
The Beatles 1968 Apple 
Yellow Submarine 1969 Apple 
Abbey Road 1969 Apple 











Let It Be 1970 Apple 4 


图 14-7 ”在 最 初 加 载 这 个 可 排序 表格 时 , 它 按照 年 份 升序 排序 一 一 Year 标签 右边 的 向 下 
箭头 向 用 户 指出 了 这 一 点 


口 cssAsc: "sortUp": 当 用 户 选择 升序 排序 时 ， 我 们 要 对 这 个 th 单元 格 应 用 一 个 新 的 CSS 规则 。 
这 个 选项 会 在 用 户 选择 升序 时 自动 分 配 "sortup" 类 ， 因 此 会 在 标签 的 右边 显示 向 上 箭头 。 

口 cssDesc: "sortDown": 如 果 用 户 希 望 采用 降序 排序 ， 可 以 再 次 单 击 这 个 th 单元 格 ， 这 时 类 会 
改 为 "sortDown" ， 因 此 在 标签 的 右边 显示 向 上 箭头 〈 见 图 14-8 )。 因 为 希望 能 够 按照 任何 列 排 
序 而 不 只 是 按照 Web 开发 人 员 决 定 的 列 排序 ， 所 以 用 户 只 需 单 击 男 一 个 th 单元 格 ， 结 果 会 立 
即 改变 ( 见 图 14-9), 不 需要 添加 任何 代码 。 
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O widgets: ["zebra"]: 在 使 用 tablesorter() 时 ， 斑 马 纹 效果 是 一 个 “免费 赠送 的 ”部 件 。 只 需 
出 希望 添加 zebra 部 件 ， 就 能 够 产生 条 纹 效果 。 






































Beatles Discography Beatles Discography 

Album ECKEN NAM Am var | Labe 
Let It Be 1970 Apple A Hard Day's Night 1964 Parlophone 
Yellow Submarine 1969 Apple Abbey Road 1969 Apple 
Abbey Road 1969 Apple Beatles for Sale 1964 Parlophone 
The Beatles 1968 Apple Help! 1965 Parlophone 
Sgt. Pepper's Lonely Hearts Club Band 1967 Parlophone Let It Be 1970 Apple 
Magical Mystery Tour 1967 Capitol Magical Mystery Tour 1967 Capitol 
Revolver 1966 Parlophone Please Please Me 1963 Parlophone 
Help! 1965 Parlophone Revolver 1966 Parlophone 
Rubber Soul 1965 Parlophone Rubber Soul 1965 Parlophone 
A Hard Day's Night 1964 Parlophone Sgt. Pepper's Lonely Hearts Club Band 1967 Parlophone 
Beatles for Sale 1964 Parlophone The Beatles 1968 Apple 
Please Please Me 1963 Parlophone With The Beatles 1963 Parlophone 
With The Beatles 1963 Parlophone Yellow Submarine 1969 Apple 
图 14-8 di Year 标签 ， 表 格 就 会 按照 降序 图 14-9 单 击 其 他 标签 ( 比如 Album ), 

重新 排序 ， 箭 头 也 会 变 成 向 上 的 那么 此 列 就 会 成 为 排序 字段 

V 提示 


口 可 从 tablesorter.com FÆ} tablesorter 插件 ( 以 及 文档 和 示例 )。 
O 使 用 jQuery 插件 时 ， 代 码 需 要 托管 在 开发 者 自己 的 服务 器 上 ， 这 里 我 们 将 代码 放 到 了 jquery 
目录 下 。 第 16 章 会 进一步 详细 讲解 插件 。 








FA jQuery 设计 页 面 




















Web 开发 进入 需要 使 用 JavaScript 框架 时 代 的 同时 , Web 设计 也 开始 频繁 考虑 使 用 特定 的 用 

T 户 界面 元 素 (比如 谓 入 和 滑 出 屏幕 的 元 素 以 及 无 所 不 在 的 “黄色 渐变 ”等 )。 这 并 非 巧合 ， 

jQuery 成 功 的 主要 原因 之 一 就 是 它 的 小 伙伴 : jQuery UI。 闻 字 识 意 ，jQuery 就 是 通过 jQuery UI 来 处 

理 常用 的 用 户 界 面 元 素 的 。 

在 本 章 中 , 我 们 将 讨论 Web 2.0 界面 外 观 , 包括 如 何 创 建 以 及 为 什么 使 用 它 。 为 了 说 明 这 些 问 题 ， 

我 们 将 深入 介绍 jQuery 和 jQuery UI 的 优点 和 用 法 。 然 后 讨论 如 何 突 出 显示 元 素 、 创 建 可 折 双 菜单 和 

显示 模 态 对 话 框 ， 并 实现 相关 联 的 视觉 效果 。 我 们 还 会 涉及 更 智能 的 日 期 选择 器 ， 既 能 显示 一 个 月 也 
能 显示 两 个 月 。 最 后 为 大 家 展示 如 何 创 建 自 定义 主题 。 


15.1 突出 显示 新 元 素 


“黄色 淡出 ”差不多 已 经 成 了 Web 设计 的 标志 : 当 页 面 上 出 现 新 内 容 时 ， 它 会 移 显示 在 黄色 背景 
上 ， 然 后 黄色 背景 慢 慢 虹 变 为 白色 〈 即 站 点 的 一 般 背 景 颜 色 )。 这 种 巧妙 的 做 法 能 够 提醒 访问 者 注意 
发 生变 化 的 内 容 ， 避 免 了 跟踪 内 容 新 旧 程度 的 负担 。 
这 个 示例 还 可 以 很 好 地 说 明 jQuery UI， 因 为 只 需 几 行 代码 ， 就 可 以 实现 丰富 的 效果 。 


脚本 15-1 只 需 在 页 面 开 头 添加 几 个 <script> 标 签 ， 就 可 以 添加 jQuery 功能 


<!DOCTYPE html> 
<html> 
<head> 
<title>Show/Hide Text</title> 
<script src="http://code. jquery.com/jquery-2.1.0.js"></script> 
<script src-"http://code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src-"scripto1.js"»«/script» 
</head> 
<body> 
<a href="#" id="textToggle">show/hidetext</a><br> 
<div id="bodyText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra aliquet 
^mi. Cras urna. Curabitur diam. Curabitur eros nibh, condimentum eu, tincidunt at, commodo vitae, 
^nisi. Duis nulla lectus, feugiat et, tincidunt nec,iaculis vehicula, tortor. Sed tortor felis, 
'viverra vitae, posuere et, ullamcorper a, leo. Suspendisse euismod libero at orci. Pellentesque 
'odio massa, condimentum at, pellentesque sed, lacinia quis, mauris. Proin ultricies risus cursus 
"mi. Cras nibh quam, adipiscing vel, tincidunt a, consequat ut, mi. Aenean neque arcu, pretium 
'posuere, tincidunt non, consequat sit amet, enim. Duis fermentum. Donec eu augue. Mauris sit amet 
'ligula.«/div» 
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</body> 
</html> 


脚本 15-2 ”这 段 代码 (使 用 jQuery 和 jQuery UL) 简化 了 新 页 面 元 素 的 突出 显示 


$(document) .ready(function() { 
$("#bodyText") .hide(); 








$("#textToggle") .click( 
function() { 
$("itbodyText").toggle("highlight",(), 2000); 
return false 


E 
5 


> 突出 显示 元 素 


1. «script src="http://code. jquery.com/jquery-2.1.0.js"></script> 
«script src="http://code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 








«script src="script01.js"></script> 

为 了 让 脚本 15-1 (HTML 页 面 ) 能 够 使 用 jQuery UI， 它 需要 访问 两 个 文件 : jquery-version.js 和 
jquery-uijs。 需 要 的 第 三 个 文件 是 我 们 自己 的 本 地 脚本 文件 ， 名 为 script01.js。 

2. $(document).ready(function() { 
在 脚本 15-2 中 ,开始 编写 JavaScript 例 程 。 这 里 的 代码 与 在 其 他 地 方 使 用 的 代码 不 同 ， 我 们 传人 
了 一 个 匿名 函数 ， 会 在 步骤 3 中 展示 。 

3. $("#bodyText") .hide(); 

jQuery 最 有 用 的 特性 之 一 是 指定 要 操作 的 对 象 的 方式 。 这 种 方式 实际 上 很 像 CSS。 在 编写 CSS 
规则 时 ， 如 果 和 希望 隐藏 id 为 bodyText 的 元 素 ， 可 能 会 编写 下 面 这 样 的 代码 : 

#bodyText { display:none; } 

可 以 看 到 ，CSS 比 等 效 的 JavaScript 命令 简短 得 多 : 

document.getElementById("bodyText").style.display = "none"; 

这 一 步 中 代码 行 的 作用 与 上 面 的 标准 JavaScript 和 CSS 规则 的 相同 : 它 告诉 浏览 器 不 显示 指定 的 
元 素 ， 见 图 15-1。 它 使 用 jQuery 内 置 的 hide() 方 法 ， 这 个 方法 不 需要 参数 。 


eoo Show/Hide Text 

































































































































































j Show/Hide Text lė 
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show/hide text 











图 15-1 在 最 初 加 载 页 面 时 ， 页 面 上 没有 太 多 内 容 
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4. $("#textToggle") .click( 


在 这 里 ， 我 们 调用 另 一 个 jQuery 内 置 方法 : 











click()。 前 一 步 中 的 代码 在 加 载 文档 时 和 运行， 而 这 


行 由 某 一 事件 触发 一 一 它 在 单 击 id 为 textToggle 的 元 素 时 运行 。 
需要 通过 参数 向 click() 方 法 传递 一 个 函数 ， 其 中 包括 单 击 时 要 触发 的 代码 。 











5. function() { 


$("itbodyText").toggle("highlight", {}, 2000); 


return false; 


} 


这 是 传递 给 click() 的 第 一 个 函数 ,首先 ,让 jQuery 寻找 id 为 bodyText 的 元 素 ,这 是 在 调用 toggle() 
时 要 显示 的 元 素 。toggle() 方 法 有 3 个 参数 。 


口 "highlight"， 我 们 需要 的 效果 。 


何 选 项 




















口 们 ， 所 需 的 效果 选项 。 黄 色 淡 出 技术 非常 流行 ， 





所 以 黄色 是 默认 颜色 ， 因 此 这 里 不 需要 修改 任 











口 2000， aug 示 效 果 的 速度 。 这 个 值 以 毫秒 为 单位 , 所 以 2000 意味 着 希望 在 两 秒 内 显示 淡出 效果 。 














最 后 返回 false 值 ， 这 样 浏览 器 就 不 会 跟踪 链接 了 。 图 15-2 显示 最 初 的 淡出 效果 ， 图 15-3 显示 


最 终结 











di dropbsscesercoseent comi? 127486. 

















图 15-2 ” 单 击 链接 ， 就 会 在 黄色 背景 上 


显示 文本 ， 然 后 黄色 逐渐 淡出 


v 提示 








D 大 家 是 否 注意 到 了 jQuery UI EÉ 








i 的 一 行 引 用 ? 








4 dropbeauserconient com B- 2)\0-)\s ifa 








showihide text 

Lorem ipsam dolor sit xnet, consectetuer adipiscing clit. Nulla viverra aliqaet mi. Cras urna, 
rabii ondis u, tincidant at, commodo vitae, nisi. Dais 

ulis vehicula, tortor. Sed tortor felis, viverra vitae, posuere 

Pellentesque odio massa, condimentum 

d, lacinia quis, mauris. Proin ultricies risus cursus mi. Cras nibh quam, 

nsequat wt, mi. Aenean aeque arcu, pretium posuere, tincidust nom, 

is fermentum. Donec eu augue. Mauris sit amet ligula. 














15-3. ”最 终 的 页 面 显示 


如 果 没 有 , 那么 在 此 解释 一 下 。 这 是 jQuery 最 








好 的 功能 之 一 : 两 者 可 以 如 此 完美 地 协同 工作 , 我 们 完全 可 以 不 去 考虑 哪些 函数 是 从 谁 那儿 引 


人 的 。 在 这 个 例子 中 ，toggle() 方 法 其 实 








实 是 jQuery UI 的 一 部 分 。 


可 能 大 家 会 有 疑问 ,为 什么 jQuery 不 把 它 的 UI 元 素 纳入 其 中 ? 要 提醒 大 家 的 是 ,jQuery 使 用 
的 很 多 框架 都 在 后 台 起 作用 ， 没 有 必要 总 是 把 月 


15.2 GUS 








不 到 的 Ul 效果 也 一 起 加 载 。 








选择 框架 的 一 种 方法 是 ,确定 经 常 需要 在 站 点 中 添加 的 某 种 功能 ,然后 看 看 该 框架 对 于 完成 这 个 
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任务 有 多 大 帮助 。 在 这 里 ， 我 们 希望 添加 可 折 司 菜单 (accordion menu )。 在 这 种 菜单 中 ， 当 打开 
部 分 时 ， 其 他 部 分 会 自动 关闭 。 与 选项 卡 式 界面 相似 ， 它 也 是 一 种 常用 的 设计 元 素 。 


脚本 15-3 ”这 个 大 纲 中 的 链接 将 通过 jQuery 在 浏览 器 中 显示 为 可 折 县 菜单 


<!DOCTYPE htm]> 
<html> 
<head> 
<title>Accordion Menus</title> 
<link rel="stylesheet" href="http://code. jquery .com/ui/1.10.4/themes/cupertino/jquery-ui.css"> 
<link rel="stylesheet" href-"scriptO2.css"» 
<script src="http://code. jquery .com/jquery-2.1.0.js"></script> 
<script src="http://code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="script02.js"></script> 
</head> 
<body> 
«hi»Shakespeare's Plays</h1> 
<ul id="theMenu"> 
<li><a href-"menui.html" class="menuLink">Comedies</a> 
<ul> 
<li><a href-"pgi.html"»All's Well That Ends Well«/a»«/li» 
<li><a href="pg2.html">As You Like It«/a»«/li» 
<li><a href-"pg3.html"»Love's Labour's Lost«/a»«/li» 
<li><a href-"pg4.html"»The Comedy of Errors«/a»«/li» 
«/ul» 
</li> 
<li><a href-"menu2.html" class="menuLink">Tragedies</a> 
<ul> 
<li><a href="pg5.html">Anthony &amp; Cleopatra«/a»«/li» 
<li><a href-"pg6.html"»Hamlet«/a»«/li» 
<li><a href="pg7.html">Romeo &amp; Juliet«/a»«/li» 
</ul> 
</li> 
<li><a href-"menu3.html" class="menuLink">Histories</a> 
<ul> 
<li><a href="pg8.html">Henry IV, Part 1</a></li> 
<li><a href="pg9.html">Henry IV, Part 2</a></li> 























</ul> 
</li> 
</ul> 
</body> 
</html> 
脚本 15-4 ”尽管 我 们 在 前 面 已 经 实现 了 相似 的 菜单 ， 但 是 使 用 jQuery 可 以 减少 大 量 CSS 代码 
#theMenu { 


width: 400px; 
} 


脚本 15-5 ”通过 使 用 jQuery， 所 需 的 JavaScript 减少 了 


$(document).ready(function() { 
$("#theMenu").accordion({ 
animated: false, 
collapsible: true, 
header: ".menuLink" 
heightStyle: "content" 
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1. <link rel="stylesheet" href="http://code. jquery.com/ui/1.10.4/themes/cupertino/jquery_ui.css"> 
<link rel="stylesheet" href="scripto2.css"> 

脚本 15-3 需要 两 个 CSS 文件 : 一 个 是 Cupertino (jQuery UI 的 内 置 主 题 )， 另 一 个 是 我 们 自己 的 
(Cscript02.css， 见 脚本 15-4 )， 它 添加 一 点 儿 CSS 代码 ， 从 而 实现 我 们 希望 的 效果 。 

2. $(document).ready(function() ( 

现在 的 代码 在 脚本 15-5 中 。 与 以 前 一 样 ， 如 果 希 望 在 页 面 加 载 时 运行 某 些 代 码 , 就 需要 把 代码 放 
在 这 个 函数 中 。 

3. $("#theMenu") .accordion({ 

在 脚本 15-3 中 ,通过 一 个 大 纲 构 造 菜单 ,并 用 无 序列 表 项 构造 每 个 菜单 的 内 容 。 这 个 示例 展示 了 jQuery 
的 简洁 性 : 脚本 15-5 只 需 获 得 顶层 ul 的 id (这 里 是 theMenu )， 然 后 对 它 应 用 内 置 的 accordion() 方 法 。 


4. animated: false， 























collapsible: true, 

header: ".menuLink" 

heightStyle: "content" 
我 们 需要 设置 几 个 选项 ， 这 在 accordion() 内 部 进行 。 它 们 如 下 所 示 。 
O animate: 如 果 和 希望 在 显示 菜单 项 时 具有 动画 效果 , 那么 把 这 个 选项 设置 为 所 需 的 效果 名 称 ( 例 
如 ，"slide" 和 "easeslide" )。 
口 collapsible: 允许 用 户 折 礁 所 有 菜单 选项 , 如 图 15-4 所 示 , 这 样 就 可 以 不 必 总 是 显示 某 些 菜单 。 
O header: jQuery 如 何 识别 每 个 菜单 的 标题 ?在 这 里 ， 所 有 菜单 标题 的 类 都 是 "menuLink"， 单 击 
一 个 标题 ， 就 会 显示 与 图 15-5 相似 的 页 面 。 
口 heightstyle: 将 它 的 值 设 置 为 "content" 迫 使 可 折 释 区域 总 是 具有 固定 的 高 度 ( 基于 所 需 的 最 大 















































区 域 )。 
€ > QC dairegbonasercontent eom ec- «€ 3 [Dam - e m 
Shakespeare's Plays Shakespeare's Plays 
» Comedies + Comedies 
+ Tragedies mam i 
^ Histories thony p 
Hamlet 
Romeo & 
Histo: 
图 15-4 ”可 设置 用 户 能 否 自由 折 著 全 部 菜单 图 15-5 单 击 一 个 菜单 标题 ， 就 会 打开 一 个 新 的 子 




















菜单 ( 并 关闭 已 经 打开 的 其 他 子 菜单 ) 








V 提示 
O 除了 上 述 选 项 之 外 ，accordion() 还 有 其 他 选项 。 这 里 设置 的 选项 只 是 我 们 希望 覆盖 默认 设置 
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的 选项 。 如 果 和 希望 当 鼠 标 悬 停 在 菜单 标签 上 时 打开 可 折 受 菜单 C 而 不 是 只 在 用 户 单 击 菜单 标签 
时 打开 )， 那 么 只 需 在 最 后 一 步 中 添加 : event: "mouseover". 

口 要 让 折 受 菜单 在 初始 状态 下 是 关闭 的 ,在 图 15-5 所 示 的 选项 列表 中 添加 active: false。 如 果 
希望 在 页 面 加 载 时 展开 折 又 菜单， 但 展开 的 不 是 第 一 个 菜单 项 ， 那 么 使 用 active: 2 (或 者 3， 
或 者 其 他 可 能 的 情况 )。 

O 不 喜欢 Cupertino 主题 ， 想 看 看 还 有 没有 别 的 选择 ?查看 补充 内 容 “ 选 择 主题 ， 任 意 主题 ”。 


15.3 ”创建 更 漂亮 的 对 话 框 


现代 网 站 上 常用 的 另 一 个 设计 元 素 是 对 话 框 ， 这 些 对 话 框 并 不 像 第 2 章 讲 述 的 那些 普通 的 prompt()、 
alert() 或 confirm() 对 话 框 。 它 们 更 像 是 在 应 用 程序 中 看 到 的 对 话 框 ， 比 如 模 态 对 话 框 。 对 于 模 态 对 
话 框 ， 用 户 必 须 作 出 响应 ， 然 后 才能 返回 到 网 页 。 同 样 ， 在 jQuery 中 完成 这 个 任务 会 更 简便 。 





















































脚本 15-6 同样， 只 需 在 这 里 添加 几 个 <script> 标 签 ， 就 能 够 启用 jQuery 


<!DOCTYPE html> 
<html> 
<head> 
<title>Modal Dialog</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css"> 
<link rel="stylesheet" href=scripto3.css> 
<script src="http://code. jquery.com/jquery-2.1.0.js"></script> 
«script src="http://code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="script03.js"></script> 
</head> 
<body> 
<div id-"example" title-"This is a modal dialog"» 
So long as you can see this dialog,you can't touch the page below 
</div> 
«hi»Welcome to my page</h1> 
«div id-"bodyText"»Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra aliquet 
mi. Cras urna. Curabitur diam. Curabitur eros nibh, condimentum eu, tincidunt at, commodo vitae, 
^nisi. Duis nulla lectus, feugiat et, tincidunt nec, iaculis vehicula, tortor. Sed tortor felis, 
'viverra vitae, posuere et, ullamcorper a, leo. Suspendisse euismod libero at orci. Pellentesque odio 
"massa, condimentum at, pellentesque sed, lacinia quis, mauris. Proin ultricies risus cursus mi. 
^Cras nibh quam, adipiscing vel, tincidunt a, consequat ut, mi. Aenean neque arcu, pretium posuere, 
'tincidunt non, consequat sit amet, enim. Duis fermentum. Donec eu augue. Mauris sit amet ligula.«/div» 
«/body» 
«/html» 


脚本 15-7. 这 一 小 段 代 码 就 能 实现 对 话 框 的 深 色 背 景 


.Ui-widget-overlay { 
background: #000 none; 
} 


脚本 15-8 ”只 需 少 量 jQuery 代码 即 可 处 理 模 态 对 话 框 


$(document).ready(function() { 
$("itexample").dialog(( 
modal: true, 
resizable: false, 
buttons: [{ 
text: "OK" 
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click: function() { 
$(this).dialog("close"); 
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15-6 ”可 以 在 浏览 器 窗口 中 拖 动 这 个 模 态 对 话 框 ， 但 是 在 关闭 它 之 前 无 法 访问 它 后 面 的 页 面 











p^ 创建 更 漂亮 的 对 话 框 








1. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui. css"> 
<link rel="stylesheet" href=script03.css> 
在 这 里 ,我们 使 用 了 jQuery UI 的 另 一 个 内 置 方案 Redmond, HIA 15-6 中 的 这 行 代 码 把 它 加 载 到 
页 面 中 。 男 外 我 们 还 在 特定 CSS 页 面 加 载 了 它 ， 如 脚本 15-7 所 示 。 
2. $("#example").dialog({ 
modal: true, 

















resizable: false, 

我 们 希望 在 页 面 上 显示 一 个 可 拖 动 的 模 态 对 话 框 , 我 们 需要 的 定制 代码 见 脚本 15-8。 当 最 初 加 载 
页 面 时 运行 这 些 代码 , 它 查找 example 元 素 并 用 这 个 元 素 作 为 对 话 框 的 基础 。 这 个 对 话 框 是 模 态 的 ( 
为 有 modal: true )， 而 且 不 能 调整 大 小 (因为 有 resizable: false )， 如 图 15-6 所 示 。 

3. buttons: [{ 
text: "OK" 
click: function() { 
$(this) .dialog("close"); 
} 
}] 
这 个 对 话 框 只 有 一 个 按钮 ， 即 OK 按钮 。 当 单 击 这 个 按钮 时 ， 对 话 框 关 闭 。 如 果 需 要 更 多 按钮 或 
执行 更 多 操作 ， 应 该 在 这 里 编写 代码 。 
V 提示 
口 默认 情况 下 ,对 话 框 是 可 调整 大 小 和 可 拖 动 的 。 如 果 需 要 可 调整 大 小 的 对 话 框 ,只 需 删 除 步 又 
2 中 的 resizable: false。 




































































308 ”第 15 章 用 jQuery 设计 页 面 





选择 主题 ， 任 意 主题 
截至 目前 为 止 ， 读者 肯定 意识 到 了 本 书 作者 并 不 是 专业 的 Web 设计 人 员 。 如 果 恰 好 你 也 一 样 ， 
那 肯 定 会 感谢 jQuery UI 免费 提供 的 大 量 专业 主题 (KINA 15-7). 
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图 15-7 可 选 的 主题 有 很 多 : Dark Hive, Hot Sneaks 


. Humanity, Le Frog, Overcast, 
South Street , 


Swanky Purse、Vader。 更 不 用 说 本 章 其 他 地 方 用 过 的 其 他 主题 
了 ， 而 且 当 然 ， 它 们 看 起 来 颜色 更 漂亮 ! 
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Swanky Purse Vader 





第 14 章 讨论 过 如 何 使 用 jQuery 的 CDN 来 修改 jQuery 的 JavaScript 文 件 , 可 喜 的 是 ,对 于 jQuery 
UI 的 CSS 文件 ， 也 可 以 这 样 做 。 

这 次 的 路 径 不 再 是 /jquery-version#/，CSS 4% T /ui/version£/themes/themeName/jQuery-ui.css , 
其 中 : 
O version# 是 我 们 希望 使 用 的 jQuery UI 的 版 本 号 (不 是 jQuery 的 版 本 号 ); 
O themeName 是 不 断 增 加 的 可 用 主题 序号 ( 当前 是 24 ), 在 http://blog.jqueryui.com 上 可 以 找到 

当前 名 称 和 位 置 列表 。 

对 比 脚本 15-3 和 脚本 15-6 可 以 发 现 ， 要 改变 页 面 风 格 ， 唯 一 需要 做 的 就 是 编辑 <link> 标 签 中 
的 主题 名 称 。 这 样 便于 在 不 同 主题 之 间 切 换 ， 所 以 把 所 有 的 主题 都 试 一 下 ， 看 看 喜欢 哪个 吧 。 


15.4 ”自动 完成 字段 


你 可 能 记得 ， 在 上 一 章 的 末尾 ,我 们 编写 了 大 量 的 代码 来 阻止 用 户 输入 无 效 的 美国 州 名 。 而 在 这 
E, 你 将 看 到 如 何 利 用 jQuery 来 化 繁 为 简 。 脚 本 15-9 是 HTML 代码 , 脚本 15-10 是 JavaScript 代码 。 


脚本 15-9 HIML 页 面 引 入 了 功能 实现 所 依赖 的 工具 包 


<!DOCTYPE html» 
<html> 
<head> 
<title>Auto-fill Form Fields</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
«script src="http://code. jquery .com/jquery-2.1.0.js"></script> 
<script src="http://code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src-"script04.js"»«/script» 
</head> 
<body> 
<div class="ui-widget"> 
«label for-"searchField"»Please enter your state:</label> 
«input id-"searchField"» 
«/div» 
«/body» 
</html> 
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脚本 15-10 jQuery 化 繁 为 简 


$(function(){ 
var stateList = "Alabama*Alaska*Arizona*Arkansas*California*Colorado*Connecticut*Delaware* 
'Florida*Georgia*Hawaii*Idaho*Illinois*Indiana*Iowa*Kansas*Kentucky*Louisiana*Maine* 
'Maryland*Massachusetts*Michigan*Minnesota*Mississippi*Missouri*Montana*Nebraska*Nevada*New 
Hampshire*New Jersey*New Mexico*New York*North Carolina*North Dakota*Ohio*Oklahoma*Oregon* 
Pennsylvania*Rhode Island*South Carolina*South Dakota*Tennessee*Texas*Utah*Vermont*Virginia* 
"Washington*West Virginia*Wisconsin*Wyoming*"; 


$("itsearchField").autocomplete(( 
source: statelist.split("*") 
DE 
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> 使 用 jQuery 处 理 自动 完成 字段 








1. var stateList = "Alabama*Alaska*Arizona*Arkansas*California*Colorado*Connecticut* Delaware* 
Florida*Georgia*Hawaii*Idaho*Illinois*Indiana*Iowa*Kansas*Kentucky*Louisiana*Maine* 
Maryland*Massachusetts*Michigan*Minnesota*Mississippi*Missouri*Montana*Nebraska*Nevada* 
New Hampshire*New Jersey*New Mexico*New York*North Carolina*North Dakota*Ohio*Oklahoma* 
Oregon*Pennsylvania*Rhode Island*South Carolina*South Dakota*Tennessee*Texas*Utah* 
Vermont*Virginia*Washington*West Virginia*Wisconsin*Wyoming*"; 
我 们 需要 州 名 列表 ， 而 这 次 ,我 们 将 其 硬 编码 到 变量 stateList P, 一 共有 50 个 州 名 ,它们 之 间 
以 星 号 分 隔 。 

2. $("#searchField") .autocomplete({ 
每 当 用 户 在 searchField 文本 框 中 输入 内 容 时 ， 执 行 相应 操作 。 

3. source: stateList.split("*") 

autocomplete() 函数 有 一 个 需要 赋值 的 元 素 source, source 元 素 的 值 类 型 是 数组 ， 那 么 ,我 
们 要 做 的 就 是 使 用 split() 函 数 将 stateList 变量 中 的 值 依据 星 号 分 隔 并 形成 一 个 数组 。 将 获得 的 数组 
传人 后 ， 余 下 的 全 部 工作 交 由 jQuery KER, WE 15-8 所 示 。 
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图 15-8 ”此 菜单 支持 用 户 通过 输入 、 自 
V 提示 
口 本 例 与 前 面 章节 中 的 示例 不 尽 相 同 。 例 如 ， 本 例 中 没有 限制 必须 从 州 名 的 起 始 位 置 进行 匹配 。 

另 一 方面 ,本 例 实现 了 前 例 中 没有 的 重要 功能 : 它 支 持 用 户 使 用 方向 键 来 从 下 拉 菜 单 中 选择 州 名 。 





击 或 者 方向 键 上 下 控制 的 方式 从 下 拉 列 表 中 选择 州 名 
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15.5 ”添加 可 排序 选项 卡 


到 目前 为 止 ， 你 应 该 对 将 无 序列 表 转 换 为 菜单 、 折 释 菜 单 以 及 其 他 一 些 东西 习以为常 了 。 在 本 节 
的 示例 中 ， 我 们 使 用 链接 组 成 的 无 序列 表 展 示 菜 单 名 称 及 其 所 含 内 容 的 div。 脚 本 15-11 是 HTML fX 
码 ， 脚 本 15-12 是 CSS 代码 。 脚 本 15-13 是 必需 的 最 简 代码 。 多 亏 jQuery， 只 需要 几 行 代码 就 能 让 菜 
单项 可 以 调整 顺序 了 。 


脚本 15-11 在 这 个 HTML 页 面 中 ， 注 意 链 接 目标 匹配 你 想 查 看 内 容 的 id 


<!DOCTYPE html» 
<html> 
<head> 
<title>Sortable Tabs</title> 
<link rel="stylesheet" href-"//code.jquery.com/ui/1.10.4/themes/pepper-grinder/jquery-ui.css"» 
<link rel="stylesheet" href="script05.css"> 
«script src-"http://code. jquery.com/jquery-2.1.0.js"></script> 
«script src-"http://code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
«script src="script05.js"></script> 
«/head» 
«body» 
«h2»Compact Stars</h2> 
«div id-"tabs"» 
«ul» 
<li><a href="#tabs-1">Neutron Star«/a»«/li» 
<li><a href="#tabs-2">Pulsar</a></li> 
<li><a href="#tabs-3">Black Hole«/a»«/li» 
</ul> 
<div id="tabs-1"> 
<p><span><img src="images/Neutron_star.png" alt="neutron star"><br>Wikimedia Commons</span> A 
*<b>neutron star</b> is a type of stellar remnant that can result from the gravitational 
‘collapse of a massive star during some kinds of supernova events. Neutron stars are 
'the densest and tiniest stars known to exist in the universe; although having only 
'the diameter of about 10 km (6 mi), they may have a mass of several times that of the 
'Sun. Neutron stars probably appear white to the naked eye. 
</p> 
</div> 
<div id="tabs-2"> 
<p><span><img src="images/pulsar. jpg" alt-"pulsar"»«br»NASA's Marshall Space Flight 
'Center«/span»A <b>pulsar</b> is a highly magnetized, rotating neutron star that emits 
'a beam of electromagnetic radiation. This radiation can only be observed when the beam 
‘of emission is pointing toward the Earth, much the way a lighthouse can only be seen 
"when the light is pointed in the direction of an observer, and is responsible for 
"the pulsed appearance of emission. 
</p> 
</div> 
<div id="tabs-3"> 
<p><span><img src="images/blackhole. jpg" alt="black hole"><br>NASA's Marshall Space 
‘Flight Center</span>A «b»black hole</b> is defined as a region of spacetime from which 
gravity prevents anything, including light, from escaping. The theory of general 
relativity predicts that a sufficiently compact mass will deform spacetime to form 
'a black hole. The hole is called "black" because it absorbs all the light that hits 
'its event horizon, reflecting nothing, just like a perfect black body in thermodynamics. 
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*The discovery of neutron stars sparked interest in gravitationally collapsed compact 
"objects as a possible astrophysical reality. Black holes of stellar mass are expected 
^to form when very massive stars collapse at the end of their life cycle. After a black 
^hole has formed it can continue to grow by absorbing mass from its surroundings. By 
‘absorbing other stars and merging with other black holes, supermassive black holes 

‘of millions of solar masses may form. There is general consensus that supermassive 
"black holes exist in the centers of most galaxies. 

















</p> 
</div> 
</div> 
</body> 
</html> 
脚本 15-12 ”这 个 示例 中 的 CSS 代码 的 唯一 作用 就 是 让 图 像 看 起 来 更 好 看 ， 如 果 内 容 中 没有 图 像 ， 
可 以 省 去 这 段 代码 
span { 


float: right; 
margin-left: 1em; 
font-size: .75em; 
text-align: center; 


} 
ing { 
width: 300px; 
} 
p::after { 
clear: both; 
content: ""; 
display: block; 
) 


脚本 15-13 ”处 理 选项 卡 UI 和 排序 功能 的 jQuery 代码 


$(function() { 
var tabs = $("#tabs").tabs(); 
tabs.find(".ui-tabs-nav").sortable(( 
axis: "x", 
stop: function() ( 
tabs.tabs("refresh"); 
} 
})3 
95 


> 添加 可 排序 选项 卡 








1. var tabs = $("#tabs"),tabs(); 

我 们 在 这 行 代码 中 创建 了 一 个 新 的 变量 tabs ， 它 会 包含 所 有 的 选项 卡 式 羔 单 项 以 及 其 中 的 内 容 ， 
这 是 通过 获取 tabs div 中 的 全 部 内 容 来 实现 的 。 选 项 卡 界面 工作 所 需 的 全 部 代码 就 这 些 ， 选 项 卡 界面 
如 图 15-9 和 图 15-10 所 示 。 
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abe T + Sortable Tabs + 
€ spb er 8 P&0- *16 z € spb onten B8 ?*&0- $*16 = 
Compact Stars Compact Stars 
Neutron Star Pulsar Black Hole Neutron Star Pulsar Black Hole 
A neutron star is a type of stellar A pulsar is a highly magnetized, rotating 
remnant that can result from the ge manm neutron star that emits a beam of 
gravitational collapse of a massive star x sii electromagnetic radiation. This radiation 
during some kinds of supernova events. y can only be observed when the beam of 
Neutron stars are the densest and tiniest MN. LL cnm emission is pointing toward the Earth, 
I DEDIT) p —— ot 
about 10 o (é i) they may have a —— dicibn e epla 
mass of several times that of the Sun. whimedta Commons responsible for the pulsed appearance of 
Neutron stars probably appear white to emission. 
the naked eye. 
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zb Z AA ANY 在 一个、 A H See NG 
图 15-9 页 面 加 载 后 自动 显示 第 一 个 选项 卡 图 15-10 单 击 第 二 个 选项 卡 会 显示 第 二 个 选项 卡 
今 dx 
KAMENE 


2. tabs.find(".ui-tabs-nav").sortable({ 
axis: "x"; 
stop: function() { 
tabs.tabs("refresh"); 
) 
})5 
这 是 处 理 排序 的 代码 。ui-tabs-nav 类 通过 jQuery 在 上 一 步 被 应 用 到 了 选项 卡 上 ， 之 后 我 们 使 用 
它 的 sortable() 方 法 定义 用 户 如 何 重新 调整 选项 卡 ,此 处 ,我 们 声明 了 排序 只 能 沿 x 轴 进 行 ,如 图 15-11 
所 示 。 用 户 一 旦 停止 拖 动 选项 卡 ， 页 面 应 该 马上 刷新 。 











Compact Stars 


Black Hole 


h 
图 15-11 因为 菜单 是 可 排序 的 ， 用 户 可 以 将 自己 喜欢 的 选项 卡 拖 到 前 面 15 
15.6 ”使 用 复 选 框 作为 按钮 


除了 无 序列 表 ， 还 有 其 他 一 些 HTML 标签 也 能 转换 为 多 姿 多 彩 的 UI 元素。 这 一 节 我 们 就 来 将 单 
调 乏 味 的 复 选 框 变 成 文雅 的 按钮 ， 只 需 一 行 jQuery 即 可 。 


Neutron Stal Pulsar 
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脚本 15-14 HTML 设置 页 面 的 内 容 


<!DOCTYPE html> 
<html> 
<head> 
<title>Checkbox Buttons</title> 
<link rel="stylesheet" href-"http://code.jquery.com/ui/1.10.4/themes/blitzer/jquery-ui.css"» 
<link rel="stylesheet" href="script06.css"> 
<script src="http://code. jquery.com/jquery-2.1.0.js"></script> 
<script src="http://code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="script06.js"></script> 
</head> 
<body> 
<div id="stylemenu"> 
<input type="checkbox" id-"checki"»«label for="checki">B</label> 
<input type="checkbox" id="check2"><label for="check2">I</label> 
<input type="checkbox" id="check3"><label for="check3">U</label> 
<input type="checkbox" id="check4"><label for="check4">Code</label> 
<input type="checkbox" id="check5"><label for="check5">ABC</label> 
<input type="checkbox" id="check6"><label for="check6">Abc</label> 
</div> 
<textarea cols="45" rows="10"> 
</textarea> 
</body> 
</html> 


脚本 15-15 CSS 设置 匹配 复 选 框 功能 的 样式 


stylemenu { 
padding: 2em 0; 


stylemenu input + label { 
font-weight: normal; 


} 


stylemenu #check1 + label { 
font-weight: bold; 


} 


stylemenu #check2 + label { 
font-style: italic; 
} 


stylemenu #check3 + label { 
text-decoration: underline; 


} 

















stylemenu #check4 + label { 
font-family: monospace; 
font-size: 1.4em; 


} 


#stylemenu #check5 + label { 
text-decoration: line-through; 
} 


#stylemenu #check6 + label { 
font-variant: small-caps; 
} 
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脚本 15-16 jQuery 非常 轻松 地 就 将 HTML 和 CSS 转换 为 吸引 人 的 UI 元素 


$(function() { 
$("itstylemenu") .buttonset(); 


p^ 使 用 复 选 框 作为 按钮 


1. «div id-"stylemenu"» 








<input type="checkbox" id="check1"> 
«label for="checki">B</label> 
<input type="checkbox" id="check2"> 
<label for="check2">I</label> 
<input type="checkbox" id="check3"> 
<label for="check3">U</label> 
<input type="checkbox" id="check4"> 
<label for="check4">Code</label> 
<input type="checkbox" id="check5"> 
«label for="check5">ABC</label> 
<input type="checkbox" id="check6"> 
<label for="check6">Abc</label> 
</div> 
ix Be HTML 代码 (脚本 15-14 的 一 部 分 ) 会 正常 显示 一 排 复 选 框 及 其 文本 标签 。 脚 本 15-15 中 的 
CSS 为 标签 添加 样式 ， 匹 配 其 预期 功能 。 
2. $("#stylemenu").buttonset(); 
脚本 15-16 中 的 这 一 行 jQuery 代码 告诉 浏览 器 找到 id 为 stylemenu 的 元 素 的 内 容 , 并 将 其 转变 为 
标准 文本 格式 化 的 按钮 ， 如 图 15-12 所 示 。 


eoo Checkbox Buttons 








m 








Checkbox Buttees Lx 





4 dropboxuserccetent.com JOE EI - MI 


le 
四 
































图 15-12 ”用 户 为 文本 框 中 的 文字 选择 了 粗 体 和 添加 删除 线 的 样式 








w 提示 
口 注意 这 个 示例 中 按钮 切换 开关 时 ， 实 际 上 并 没有 修改 输入 textarea 字段 的 文本 。 
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15.7 在 页 面 中 添加 日 历 


许多 Web 应 用 程序 都 需要 一 个 用 户 能 够 参考 与 交互 的 日 历 ,， 如 预约 表单 、 待 办 清单 、 博 客 上 的 
博文 导航 等 。jQuery 库 包含 了 一 个 好 用 且 易 于 实现 的 日 历 控件 ， 如 图 15-13 所 示 。 最 棒 的 是 它 非 常 
灵活 ,编写 密 密 几 行 代 码 即 可 改变 它 的 外 观 和 功能 。 下 面 给 出 一 个 交互 式 单 日 历 (一 次 仅 显 示 一 个 
A) 的 示例 。 
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pu: 


图 15-13 第 一 次 打开 页 面 时 ，datepicker 部 件 显示 在 所 选择 主题 


脚本 15-17 日 历 示 例 的 HTML 页 面 。 请 注意 ， 我 们 指向 的 是 jQuery 上 的 jQuery 副本 


<!DOCTYPE html> 

<html> 

<head> 
<title>1-up Date Picker</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css"> 
<script src="http://code. jquery.com/jquery-2.1.0.js"></script> 
<script src="http://code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="script07.js"></script> 

</head> 

<body> 
<h2>Date: <span id="datepicked"></span></h2> 
<div id="datepicker"></div> 

</body> 

</html> 


脚本 15-18 ”这 个 JavaScript 文件 调用 了 jQuery， 并 设置 了 用 户 单 击 日 历 后 显示 日 期 所 需 的 参数 


$(function() { 
$("#datepicker") .datepicker({ 
dateFormat: 'DD, MM dd, yy', 
onSelect: function(selectedDate) ( 
$("#datepicked").empty().append(selectedDate) ; 
} 
D; 
3 
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> 添加 单 日 历 


1. <h2>Date: <span id="datepicked"></span></h2> 
<div id="datepicker"></div> 

脚本 15-17 列 出 了 HTML 页 面 代 码 ， 它 需要 支持 jQuery 日 历 控件 。 

2. $("#datepicker").datepicker({ 

HTML 代码 中 有 一 个 id 值 为 datepicker 的 div， 在 脚本 15-18 所 示 的 这 行 JavaScript 代码 中 ， 我 
们 将 jQuery UI 的 datepicker ÙF EET EM 

3. dateFormat: "DD, MM dd, yy", 

我 们 准备 在 页 面 上 以 特定 的 形式 显示 日 期 , 此 处 , 我 们 要 通知 jQuery 以 何 种 方式 显示 日 期 : 首先 
是 星期 ， 接 着 是 完整 的 月 份 名 称 ， 再 下 来 是 具体 一 个 月 中 的 哪 一 天 ， 最 后 是 四 位 数 的 年 份 。 

4. onSelect: function(selectedDate) { 

页 面 上 的 日 期 部 件 会 自动 弹出 ， 选 中 某 个 日 期 时 ，jQuery 事件 处 理 程序 onSelect 会 被 触发 。 

5. $("#datepicked").empty().append(selectedDate); 

选中 日 期 时 ,我们 想 要 更 新 页 面 上 的 显示 ， 这 行 代码 正 是 用 来 做 这 件 事情 的 。 我 们 会 更 新 id fH 
为 datepicked 的 span 标签 ,首先 清空 当前 值 ( 如 果 存 在 的 话 ), 然后 将 selectedDate 写 入 其 中 ， 如 图 
15-14 所 示 。 
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Date: Monday, October 27, 2014 
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图 15-14 用 鼠标 选中 了 日 期 以 后 ， 被 选中 的 日 期 会 在 日 历 中 突出 显示 。 
本 例 中 ,我 们 额外 添加 了 在 日 历 上 方 显 示 日 期 的 代码 


























V 提示 
口 看 起 来 可 能 有 点 奇怪 ,但 是 结果 正确 ，yy 会 返回 四 位 数 的 年 份 。 如 果 要 显示 两 位 数 的 年 份 ， 
请 使 用 y 来 替换 yy。 
> 在 页 面 上 添加 双 联 日 历 
有 时 ， 你 只 需要 一 个 日 历 ， 如 约会 、 预 订餐 厅 等 。 不 过 ， 双 联 日 历 也 很 常见 。 它 们 通常 会 被 用 于 
那些 起 止 日 期 不 同 的 事件 。 例 如 ， 预 订 酒 店 和 购买 机 票 的 时 候 ， 你 常会 见 到 它们 。 
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脚本 15-19 在 以 下 HTML 页 面 中 添加 了 双 联 日 历 ， 其 中 包含 两 个 日 期 字段 


<!DOCTYPE html> 

<html> 

<head> 
<title>2-up Date Picker</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/start/jquery-ui.css"> 
Link rel="stylesheet"href="script08.css"> 
<script src="http://code. jquery .com/jquery-2.1.0.js"></script> 
<script src="http://code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="script08.js"></script> 

</head> 

<body> 

«hi»Select your check in and check out dates:</h1> 
<label for="from">From</label> <input type="text" id="from" name="from"> 
<label for="to">to</label> <input type="text" id="to" name="to"> 

</body> 

</html> 


脚本 15-20 下 面 的 CSS 代码 将 datepicker 下 移 一 小 段 距 离 


div#ui-datepicker-div { 
margin-top: 10px; 
} 


脚本 15-21 jQuery PACK datepicker 对 象 绑 定 到 了 页 面 的 两 个 日 期 字段 上 ， 并 将 返回 结果 存储 
到 一 个 变量 中 


$(function() { 
var dates = $("#from, #to").datepicker({ 
defaultDate: "+1w", 
numberOfMonths: 2, 
onSelect: function(selectedDate) ( 
var option - (this.id -- "from") ? "minDate" : "maxDate", 
date - $.datepicker.parseDate ($.datepicker. defaults. dateFormat, selectedDate); 
dates.not(this).datepicker ("option", option, date); 
j 
DE 
35 


> 添加 双 联 日 历 














1. «label for="from">From</label><input type="text" id="from" name-"from"» 

<label for="to">to</label><input type="text" id="to" name="to"> 

上 述 代码 是 实现 功能 所 需 的 HTML 代码 的 最 小 集 ， 将 其 添加 到 脚本 15-19 所 示 的 Web 页 面 中 ， 
如 图 15-15 所 示 。 脚 本 15-20 是 CSS 文件 ， 更 短 。 

2.var dates = $("#from, #to").datepicker({ 

乍 一 看 , 脚本 15-21 所 示 的 JavaScript 代码 与 脚本 15-18 颇 为 相似 , 但 实际 上 并 不 相同 。 与 之 前 将 
datepicker 对 象 绑 定 给 页 面 上 的 一 个 元 素 不 同 ， 我 们 现在 将 其 绑 定 到 了 两 个 元 素 上 : id 值 为 from 和 
to 的 两 个 元 素 。 此 外 ， 我 们 还 将 datepicker 的 返回 结果 保存 到 了 dates 变量 中 以 备 将 来 使 用 。 

3. defaultDate: "+1w", 

通过 datepicker 部 件 ， 我 们 可 以 设置 默认 的 开始 日 期 。 这 里 ， 我 们 将 其 设 为 下 周 的 今天 。 
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2-up Date Picker 


€ c di. dropboxusercontent.com. © 三 


Select your check in and check out dates: 


From to 











图 15-15 在 datepicker 部 件 的 其 他 双 联 形式 中 ， 页 面 会 先 显 示 两 个 日 期 字段 。 用 Tab 键 进 
入 或 者 用 鼠标 单 击 第 一 个 日 期 字段 时 ， 页 面 会 显示 一 个 双 联 日 历 的 datepicker 





4. numberOfMonths: 2, 

使 用 jQuery 的 原因 之 一 在 于 它 的 灵活 性 , datepicker 部 件 灵 活性 的 具体 表现 之 一 是 它 可 以 轻易 地 
修改 每 次 显示 的 月 份 数 。 此 处 ， 我 们 要 一 次 显示 两 个 月 。 

5. onSelect: function(selectedDate) { 

与 之 前 的 示例 一 样 ， 我们 希望 在 日 期 被 选中 的 同时 做 一 些 事情 ， 具 体 而 言 ， 就 是 在 这 个 位 置 编写 
相应 的 代码 ， 如 图 15-16 所 示 。 















































Select your check in and check out dates: 
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图 15-16 在 月 份 名 称 栏 的 左右 两 侧 有 箭头 形状 的 按钮 ， 你 可 以 单 击 它们 来 更 
改 月 份 的 显示 。 要 选择 开始 日 期 ， 只 要 单 击 左 侧 日 历 中 的 日 期 即 可 





6. var option = (this.id == "from") ? "minDate" : "maxDate", 

此 处 ， 我 们 指出 了 当前 所 用 的 日 历 ， 并 将 结果 存储 在 option 变量 中 。 如 果 this.id 的 值 为 from, 
option 变量 的 值 会 被 设 为 minDate。 否则 , 如 果 this.id 的 值 为 to, option 变量 的 值 会 被 设 为 maxDate。 

7. date = $.datepicker.parseDate($.datepicker. defaults.dateFormat, selectedDate) ; 

我 们 能 够 自动 获取 到 selectedDate 的 值 , 但 其 格式 并 非 我 们 所 需 的 格式 。 此 处 , 我 们 使 用 datepicker 
的 parseDate() 函数 来 转换 日 期 格式 ， 并 将 结果 保存 到 date 变量 中 。 


8. dates.not(this).datepicker("option", option, date); 
最 后 ， 我 们 用 刚刚 赋 过 值 的 option 变量 和 date 变量 来 辅助 设置 可 选 范围 的 开始 日 期 ( minDate ) 
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和 结束 日 期 (maxDate )， 如 图 15-17 所 示 。 


图 15-17 需要 注意 


现在 ， 你 可 以 在 右 侧 的 日 历 中 选择 第 二 个 日 期 (高 亮 : 

















Select your check in and check out dates: 
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是， 在 左 侧 的 日 历 中 选择 了 日 期 以 后 ， 选 中 日 期 之 前 的 日 期 都 会 
变 灰 失 效 。 选 中 的 第 一 个 日 期 会 被 填 人 datepicker 上 方 的 第 一 个 日 期 字段 中 。 





后 ， 其 值 会 被 填 入 到 第 二 个 日 期 字段 中 





15.8 使 用 ThemeRoller 定制 外 观 


作为 Web FEADR, 你 需要 与 设计 师 一 起 为 网 站 创建 统一 的 外 观 。 令 人 高 兴 的 是 , jQuery 的 作者 
明白 仅 为 网 站 添加 功能 是 不 够 的 , 还 必须 考虑 这 些 功能 对 网 站 观感 的 影响 。 而 这 正 是 创建 ThemeRoller 
的 原因 。 作 为 一 个 工具 ,ThemeRoller 允许 用 户 根据 项 目 需要 来 定制 jQuery 的 用 户 界面 主题 ,如 图 15-18 
所 示 。 你 可 以 新 建 一 个 完全 自 定义 的 主题 ， 也 可 以 修改 任意 预先 设计 好 的 主题 。 要 了 解 ThemeRoller 
可 以 从 访问 http://jqueryui.com/themeroller 开始 。 














> 创建 自 定义 主题 





示 的 部 分 ) 了 。 选 中 











1. 创建 自 定义 主题 的 最 简单 的 方式 莫 过 于 以 现 有 jQuery 主题 中 的 某 一 个 为 基础 。 单 击 左 侧 边栏 
中 的 Gallery， 查 看 你 的 选择 ， 如 图 15-18 所 示 。 
2. 查看 可 用 主题 ， 找 到 与 期 望 外 观 最 相近 的 主题 。 单 击 主题 右 下 方 的 Edit 按钮 。 随 后 ， 左 侧 边 
栏 会 切换 至 Roll Your Own 面板 ， 如 图 15-19 所 示 。 














3. 此 时 ， 你 可 以 选择 面板 上 的 可 折 生 菜单 项 ， 单 击 后 会 出 现 相 应 项 的 设置 ， 如 图 15-20 所 示 。 





























4. 编辑 侧 边 栏 中 的 值 时 ,页 面 的 主体 部 分 会 进行 相应 的 更 新 匹配 ,你 可 以 立即 看 到 ( 并 判断 ) 其 


差异 。 





S. 如 果 你 对 结果 满意 ， 单 击 面 板 上 方 的 Download Theme #4, JUTE 


页 面 ， 如 图 15-21 所 示 。 


6. 在 这 个 页 面 上 ， 你 能 够 控 
小 集 ， 你 的 页 面 会 在 下 载 和 呈现 上 花费 更 长 的 时 间 。 那 就 是 说 ， 如 曙 
Shake 或 Pulsate 效果 ( 晃动 或 跳动 效果 )， 只 要 不 勾 选 它们 前 面 的 复 选 

















范围 之 内 。 








| 会 跳 转 至 Download Builder 


























7. 选 定 了 所 需 的 全 部 内 容 后 ， 单 





ill CSS 的 “ 轻 ” 与 “ 重 ”。 如 果 你 选择 全 部 组 件 ， 那 么 相 比 于 选择 最 
你 知道 自己 的 网 站 永远 不 会 用 到 








匡 ， 它 们 就 不 会 被 包含 在 下 载 


E Download 按钮 。 最 终 ， 你 会 获得 一 个 jQuery 相关 的 下 载 文件 





K, 在 其 根 目 录 下 ， 有 一 个 名 为 index.html 的 文件 。 在 浏览 器 中 打开 index.html, 它 会 精确 显示 出 你 所 
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下 载 的 内 容 ， 此 外 ， 它 还 会 指导 你 如 何 将 新 主题 添加 到 网 站 页 面 中 。 


ż00¢02 





ThemeRoller wao 


Roll Your Own 














图 15-18 ”通常 情况 下 ， 在 ThemeRoller 中 定制 主题 图 15-19 单 击 Roll Your Own 选项 卡 ， 会 

















的 最 佳 办 法 是 从 Gallery 选项 卡 下 选 出 显示 出 更 多 可 用 的 定制 选项 




















一 个 现 有 主题 ， 在 其 基础 上 进行 自 定义 























图 15-20 Æ Roll Your Own 选项 卡 中 更 改 类 别 时 ，ThemeRoller 会 在 屏幕 右 侧 为 你 提供 
实时 预览 。 此 例 中 ， 我 们 将 字体 粗细 程度 加 强 为 Bold， 将 字号 从 1.1em 增加 


到 1.5em, 并 设置 标题 /工具 栏 ( Header/Toolbar ) 的 背景 图 案 为 斜纹 平行 图 案 。 
在 Tabs 和 Datepicker 两 个 组 件 中 ， 你 会 看 得 更 加 清晰 
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Download Builder 
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rave 




















图 15-21 在 ThemeRoller 中 单 击 Download Theme 按钮 后 , 页 面 会 跳 转 至 Download Builder 
页 面 。 在 这 里 ， 你 可 以 进一步 定制 所 需 构 建 和 下 载 的 组 件 。 当 定制 项 符合 你 
的 需求 时 ， 单 击 Download 按钮 进行 下 载 








V 提示 
O 如 果 使 用 自 定义 主题 ， 要 确保 页 面 中 引用 的 是 刚刚 下 载 的 文件 而 非 jQuery 的 CDN。 当 然 ， 要 
记得 将 它们 上 传 到 你 的 服务 器 ! 





基于 jQuery 的 应 用 




















pinum 你 已 经 了 解 了 如 何 利用 现 有 的 HTML 和 CSS 知识 ， 通 过 jQuery 库 编写 尽量 
HE 2 uc 通常 情况 下 ， 使 用 jQuery 在 网 站 中 添加 JavaScript 函数 
比 自己 编码 实现 这 些 函 数 要 容易 得 多 。 

上 一 章 中 , 我 们 讨论 了 jQuery 的 用 户 界面 工具 包 , 借助 于 它 , 你 能 够 轻松 地 为 网 站 添加 一 些 功能 
如 菜单 、 按 钮 、 对 话 框 和 进度 条 等 ， 这 些 功能 都 是 OS X 和 Windows 系统 用 户 的 常用 功能 。 除了 用 户 
界面 上 的 改进 ，jQuery 库 还 为 向 网 站 添加 各 种 功能 打下 了 基础 。 举 两 个 这 方面 的 例子 : 基于 jQuery, 
你 能 够 使 用 Ajax, JSON 或 者 两 者 兼 而 有 之 的 方式 来 访问 服务 器 上 的 远程 数据 ; 利用 jQuery 插件 ,你 
可 以 赋予 jQuery 全 新 的 功能 ， 进 而 为 网 站 添加 这 些 全 新 的 功能 。 下 面 ， 我 们 来 动手 实践 吧 ! 


16.1 以 jQuery 为 基础 


引入 jQuery 的 最 大 收获 之 一 是 你 能 将 自己 从 浏览 器 兼容 性 的 极 相 中 解放 出 来 。 对 不 同 浏览 絮 而 
Ti. 其 使 用 JavaScript 的 方式 不 尽 相 同 , 因此 , 手写 JavaScript 代码 时 往往 需要 编写 额外 的 代码 以 应 对 
不 同 浏 览 器 的 特质 。 使 用 jQuery 时 ,兼容 性 问题 将 不 复 存 在 ， 因 为 jQuery 提供 了 一 套 跨 浏 览 器 的 通 
用 函数 集 。jQuery 库 充 分 考虑 了 浏览 器 间 的 差异 ， 而 作为 开发 者 的 你 则 不 必 再 考虑 兼容 性 问题 了 。 

基于 jQuery， 使 用 包括 类 名 和 id 在 内 的 CSS 选择 器 ， 你 能 够 访问 并 操作 页 面 上 的 任意 元 素 。 你 
可 以 更 好 地 控制 页 面 ， 因 为 jQuery 赋予 了 你 随时 创建 或 删除 HTML 元 素 的 能 力 。 

jQuery 库 先 于 页 面 上 其 他 元 素 加 载 〈 因为 它 是 在 页 面 上 的 head 部 分 中 调用 的 ， 而 其 他 元 素 则 是 
在 body 元 素 中 )， 因 此 ， 待 操作 的 元 素 一 准备 好 ， 库 就 能 立即 运行 与 之 相关 的 代码 。 这 种 方式 优 于 使 
用 浏览 器 当 页 妈 片 在 内 的 所 有 元 素 都 加 载 完 毕 时 ，onload 函数 才 会 
被 调用 。 对 用 户 而 言 ， 使 用 jQuery 这 种 方式 的 好 处 是 页 面 能 够 更 快 响应 他 们 的 行为 。 


























































































































16.1.1 Ajax、JSON 和 jQuery 


jQuery 库 包 含 了 一 系列 丰富 的 用 于 页 面 与 后 台 服 务 器 交互 的 Ajax 函数 。 通 过 这 些 Ajax 函数 ,我 
们 可 以 获取 更 多 的 数据 而 无 需 刷新 页 面 。 

不 刷新 页 面 获取 数据 的 好 处 在 于 它 让 基于 Web 的 应 用 程序 可 以 像 桌面 应 用 程序 那样 快速 响应 ,从 
服务 器 接收 到 了 更 新 过 的 数据 以 后 , 你 可 以 借助 jQuery 来 更 新 页 面 元 素 , 且 不 会 出 现 页 面 刷新 时 的 那 
种 明显 闪烁 。 
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正如 前 面 章节 中 所 介绍 的 ， 使 用 JavaScript 和 XMLHttpRequest 对 象 完全 可 以 自己 编写 Ajax 请 求 。 
首先 , 你 需要 把 准备 发 往 服 务 器 的 数据 加 载 到 对 象 中 , 然后 , 构建 另 一 个 函数 来 接收 服务 器 端的 响应 。 
同时 ， 你 还 需要 错误 检测 代码 以 确保 服务 器 端的 响应 是 正确 而 有 意义 的 。 如 果 不 想 编写 上 述 代码 ， 你 
仅 需 使 用 jQuery 函数 $.ajax() 即 可 处 理 整 个 过 程 。 

与 之 类 似 , jQuery 还 提供 了 $.get]JSON() 函 数 ， 让 你 能 够 轻松 访问 和 操作 接收 到 的 ISON 格式 的 
数据 。 





16.1.2 jQuery 插件 


jQuery 核心 库 包 含 了 大 量 的 内 置 功能 ,尽管 如 此 ， 开 发 人 员 可 以 轻易 地 将 新 功能 添加 为 插件 ， 进 
而 为 网 站 创建 一 套 几 乎 无 限制 的 功能 集 。 目 前 ， 有 数 以 百 计 的 插件 可 供 免 费 下 载 ， 它们 在 不 同 的 领域 
扩展 了 jQuery 的 功能 。 你 能 搜 到 各 种 功能 的 插件 ， 比 如 添加 动画 效果 ， 人 允许 用 户 拖 放 页 面 元 素 ,， 改变 
页 面 布 局 ， 处 理 不 同 的 媒体 类 型 ， 操 作 页 面 导航 ， 添 加 有 用 的 部 件 等 。 

在 你 喜爱 的 Web 搜索 引擎 中 简单 搜索 一 下 ， 即 可 找到 丰富 的 可 供 选 择 的 jQuery 插件 。 或者， 你 
也 可 以 先 在 http://plugins.jquery.com 中 搜索 插件 。 


16.2” 拖 放 元 素 


UI 功能 中 最 美妙 的 一 个 功能 莫 过 于 用 户 能 够 根据 个 人 喜好 来 拖 放 页 面 元 素 。 本 节 的 示例 中 , 我 们 
将 创建 一 个 虚拟 的 轻 量 级 表格 页 面 ， 以 显示 基于 Web 的 幻灯 片 ， 如 图 16-1 所 示 。 你 可 以 在 页 面 上 拖 
放 图 片 ， 使 其 按 特 定 的 顺序 显示 ， 如 图 16-2 所 示 。 如 果 这 是 一 个 完整 的 Web 应 用 程序 ， 你 甚至 可 以 
单 击 “Build it!” 按 钮 来 创建 幻灯 片 ， 并 让 其 按照 选 定 的 顺序 进行 播放 ， 如 图 16-3 所 示 。 脚 本 16-1 是 
页 面 的 HTML 代码 ， 脚 本 16-2 是 示例 的 CSS 代码 ， 脚 本 16-3 是 示例 的 JavaScript 代码 。 
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16-1. 首次 加 载 幻灯 片 页 面 时 ， 照 片 按 图 16-2 ”点 中 并 拖 动 一 张 图 片 会 使 其 他 图 
照 预 设 顺序 显示 片 脱离 原来 的 位 置 
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LXX Drag and Drop Shades 
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Build Your Slide Show 











图 16-3 重新 排列 后 的 图 片 已 经 可 以 用 于 创建 幻灯 片 了 ， 只 待 你 单 击 “Build it! ”按钮 
(不 过 ， 这 是 另外 一 个 插件 了 ) 


脚本 16-1 用 于 描述 虚拟 轻 量 级 表格 的 HTML 页 面 中 有 一 个 无 序列 表 ， 其 中 由 括 了 所 有 的 图 片 


<!DOCTYPE html> 
<html> 
<head> 
<title>Drag and Drop Slides</title> 
<link rel="stylesheet" href-"//code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css"» 
<link rel="stylesheet" href="script01.css"> 
<script src-"http://code. jquery.com/jquery-2.1.0.js"></script> 
<script src="http://code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="script01.js"></script> 
</head> 
<body> 
<h1>Build Your Slide Show <a href="#">Build it!</a></h1> 
<ul id="sortable"> 
«li class="ui-state-default"><img src-"images/img 0001.jpg" alt-"slide #1"></li> 
«li class="ui-state-default"><img src-"images/img 0002.jpg" alt-"slide #2"></li> 
































«li class="ui-state-default"><img src-"images/img 0003.jpg" alt-"slide #3"></li> 
«li class-"ui-state-default"»«img src-"images/img 0004.jpg" alt="slide #4"></li> 
«li class="ui-state-default"><img src-"images/img 0005.jpg" alt-"slide #5"></li> 
«li class-"ui-state-default"»«img src-"images/img 0006.jpg" alt-"slide #6"></li> 
«li class-"ui-state-default"»«img src-"images/img 0007.jpg" alt-"slide #7"></li> 
«li class-"ui-state-default"»«img src-"images/img 0008.jpg" alt-"slide #8"></li> 
«li class-"ui-state-default"»«img src-"images/img 0009.jpg" alt-"slide #9"></li> 
«li class-"ui-state-default"»«img src-"images/img 0010.jpg" alt-"slide #10"></1li> 
«li class-"ui-state-default"»«img src-"images/img 0011.jpg" alt-"slide #11"></1li> 
«li class-"ui-state-default"»«img src-"images/img 0012.jpg" alt-"slide #12"></1li> 
</ul> 
</body> 


</html> 
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的 外 观 





脚本 16-2 虚拟 轻 量 级 表格 的 CSS 文件 ， 其 中 定义 了 页 本 


#sortable { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 820px; 

} 


#sortable li { 
margin: 3px; 
padding: 3px; 
float: left; 

} 


#sortable li img { 
width: 256px; 
height: 192px; 


} 

hia { 
float: right; 
display: inline-block; 
font-size: .8em; 
padding: 8px; 
text-decoration: none; 
background-color: silver; 
border: 1px solid gray; 
margin: -5px 25px 0 0; 

} 


脚本 16-3 ”只 需 下 面 这 个 简单 的 jQuery ene, FUP SERE te v E EGAL 


$(function() { 
$("#sortable").sortable().disableSelection() ; 
35 


> 启用 页 面 元 素 的 拖 放 功能 








1. <ul id="sortable"> 


<li class="ui-state-default"><img src="images/img_0001.jpg" alt-"slide #1"></1li> 


<li class="ui-state-default"><img src="images/img_0002.jpg" alt-"slide #2"></li> 
上 面 只 列 出 了 HTML 页 面 上 列表 项 的 前 两 条 ( 共 12 条 )。 如 果 需 要 增加 或 减少 幻灯 片 中 的 图 片 ， 














只 要 添加 或 删除 列表 中 的 元 素 即 可 。 
2. #sortable { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 820px; 
} 


在 CSS 中 ， 待 排序 的 列表 项 都 在 id 值 为 sortable 的 div 元 素 


布局 。 











1， 而 这 个 div 包含 了 页 面 的 主要 
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3.#sortable li { 
margin: 3px; 
padding: 3px; 
float: left; 
} 
BER IN ZT A S EUG — FE HE EAN Te ec ER ARP, DAT 555] PREC 
表 项 紧密 相 邻 。 
4. #sortable li img { 
width: 256px; 
height: 192px; 
} 
Tu bia FE TT aE SCAR op Re ae PZ A Fd o 
5. $("#sortable").sortable().disableSelection(); 
最 后 是 jQuery 代码 。 只 有 这 些 ? 是 的 ， 代 码 就 这 么 多 。 以 上 所 有 的 功能 只 要 这 么 一 行 jQuery 代 
码 即 可 实现 。 现 在 ， 用 户 可 以 对 id (AON sortable 的 div 中 的 列表 项 进行 排序 了 ， 同 时 ， 我 们 屏蔽 了 
选择 功能 以 避免 用 户 在 排序 过 程 中 选中 列表 项 。 


16.3 ”使 用 jQuery 处 理 外 部 数据 


i£ E, Æ Web 页 面 上 使 用 外 部 数据 (XML RE JSON 数据 ) 是 比较 简单 的 。 用 户 的 显示 器 上 
有 a 服务 器 上 有 更 多 的 数据 ; 你 希望 页 面 能 够 在 不 刷新 的 前 提 下 加 载 这 些 数据 。 
服务 器 上 的 数据 可 能 是 文本 、 图 片 、 音 乐 、 视 频 等 任意 形式 的 数据 。 下 面 的 示例 结合 上 一 节 的 拖 
放 功 能 和 使 用 jQuery 加 载 第 13 章 用 过 的 Flickr feed. HTML 见 脚本 16-4, CSS 见 脚本 16-5, JavaScript 
(随后 讲解 ) 见 脚本 16-6。 


脚本 16-4 ”获取 并 显示 外 部 数据 Feed ( 示例 中 是 Flickr feed ) 时 ， 你 要 先 创 建 HTML 页 面 


<!DOCTYPE html» 

<html> 

<head> 
<title>Drag and Drop External Data</title> 
<link rel="stylesheet" href-"//code.jquery.com/ui/1.10.4/themes/eggplant/jquery-ui.css"» 
<link rel="stylesheet" href="script02.css"> 
<script src="http://code. jquery .com/jquery-2.1.0.js"></script> 
«script src="http://code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="script02.js"></script> 

</head> 

<body> 
<h2 id="head"></h2> 
«h4 id="subhead"></h4> 
<ul id="sortable"></ul> 

</body> 

</html> 
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脚本 16-5 Flickr feed 中 的 元 素 被 解析 出 来 后 ，CSS 文件 就 会 为 它们 添加 样式 


#sortable { 
list-style-type: none; 
padding: 0; 


#sortable li { 
margin: 3px; 
padding: 3px; 
float: left; 

} 


脚本 16-6 ”这 个 JavaScript 文件 中 的 jQuery 代码 用 来 获取 并 人 处理 ISON 格式 的 Flickr feed 


$.getJSON( 
á "http://api.flickr.com/services/feeds/photoset.gne?nsid-239221090N008set-72157600976524175 
&format-json&jsoncallback-?", 
function(data) { 
createPage(data); 


5 


function createPage(imgData) { 
var imgs = ""; 
$("#head") .html(imgData.title) ; 
$("#subhead") .html(imgData.description) ; 


$.each(imgData.items, function(i, item) { 
imgs += "<li class-'ui-state-default'»«a href-'" + item.link + "'»«img src=""; 
imgs += item.media.m.replace(/ m/g," q") + "' alt='" + item.title + "'></a></li>"; 


H; 


$("#sortable").append(imgs); 
$("itsortable").sortable().disableSelection(); 


} 
=> 使 用 jQuery 访问 feed 数据 


1. $.getJSON( 
"http://api.flickr.com/services/feeds/photoset.gne?nsid-239221098N008set- 
>72157600976524175&format=json&jsoncallback=?", 
function(data) { 
createPage(data) ; 


) 
); 
代码 乍 看 起 来 很 复杂 ， 但 事实 并 非 如 此 。 传 给 $.get]JSON 的 参数 只 有 两 个 。 
口 包含 所 需 数据 的 URL 字符 串 。 本 例 中 ， 它 是 脚本 13-12 中 的 Flickr feed. 
口 匿名 函数 , 它 在 获得 数据 后 会 被 调用 。 回 调 函 数 只 做 了 一 件 事 :调用 了 另 一 个 名 为 createPage() 
的 函数 。 
2. var imgs = ""; 
$("#head") .html(imgData.title) ; 
$("#subhead") .html(imgData.description) ; 
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现在 我 们 进入 createPage() 函 数 ， 解 析 输 入 数据 ( 目前 是 名 为 imgData 的 数据 数组 ) 以 便 向 页 面 
添加 元 素 。 首 先 初始 化 新 变量 imgs， 后 面 会 经 常 看 到 这 个 变量 。 

接 下 来 获取 图 像 自身 的 基本 信息 ， 并 将 信 息 放 人 head 和 subhead 元 素 。 

3. $.each(imgData.items,function(i, item) { 

接 下 来 ， 需 要 循环 处 理 每 个 图 像 。 内 置 函 数 $.each() 会 逐 行 取出 数据 并 存 人 iten 变量 


4. imgs += "<li class-'ui-state-default'»«a href='"+ item.link + "'»«img src=' 


























imgs += item.media.m.replace(/ m/g," q") + "' alt-'" + item.title + "'></a></li>"; 
关键 工作 是 在 这 里 完成 的 。 对 于 feed 中 的 每 个 图 像 ， 我 们 为 imgs 变量 添加 文本 ， 图 像 变 成 了 图 
像 标签 ， 位 于 链接 标签 内 部 ( <a> )， 而 ca> 又 位 于 列表 元 素 内 部 (<1i> )。 图 像 链 接 、 图 像 源 以 及 图 像 
的 蔡 换 文本 〈alt ) 信息 均 来 自 Flickr feed. 
5. $("#sortable").append(imgs); 
di sortable().disableSelection(); 
整 的 imgs 变量 被 添加 到 页 面 ， 最 终 ， 图 像 终于 又 可 以 调整 顺序 了 ， 如 图 16-4 所 示 。 











Content from Paradise Ridge Sculpture Gro 


ines net eah be great wines, bet they aho have a sculpture garden. We visited os 
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图 16-4 jQuery 代码 获取 到 一 条 ISON 格式 的 feed (本 例 中 ， 是 本 书 其 中 
一 位 作者 的 Flickr 数据 流 ) ， 解 析 它 ， 并 将 结果 显示 在 页 面 上 


16.4 使 用 jQuery 插件 


如 前 所 述 , 开 发 人 员 为 了 扩展 jQuery 的 核心 功能 而 创建 了 各 式 各 样 的 插件 ,jQuery 插件 数量 太 多 ， 
本 书 不 可 能 一 一 讨论 ， 因 此 我 们 用 一 个 示例 来 展示 jQuery 插件 的 强大 。 

在 本 例 中 我 们 使 用 插件 SlideJS 显示 专业 水 准 的 图 像 幻 灯 片 ， 如 图 16-5 所 示 。SlideJS 是 免费 下 
载 软件 , 跟 自 定义 主题 一 样 ,， 下载 后 需要 集成 到 自己 的 网 站 。 为 幻灯 片 添加 样式 的 CSS 代码 会 同时 
下 载 。 
























































图 16-5 开始 播放 幻灯 片 

















脚本 16-7 HTML 页 面包 括 来 自 SlideJS 插件 的 文件 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Plugin Slideshow</title> 
<link rel="stylesheet" href="SlidesJS/css/example.css"> 
<link rel="stylesheet" href="SlidesJS/css/font-awesome.min.css"> 
<link rel="stylesheet" href="script03.css"> 
<script src-"http://code. jquery.com/jquery-2.1.0.js"></script> 
<script src-"SlidesJS/source/jquery.slides.min.js"»«/script» 
<script src="script03.js"></script> 
</head> 
<body> 
<div id="slides"> 
<img src="images/01estock_commonswiki. jpg" alt="01estock_commonswiki. jpg"> 
<img src="images/02estock_commonswiki. jpg" alt="02estock_commonswiki. jpg"> 
<img src="images/03estock_commonswiki. jpg" alt="03estock_commonswiki. jpg"> 
<img src="images/04estock_commonswiki. jpg" alt="04estock_commonswiki. jpg"> 
<img src="images/O05estock_commonswiki. jpg" alt="05estock_commonswiki. jpg"> 
<img src="images/O06estock_commonswiki. jpg" alt="06estock_commonswiki. jpg"> 
<a href="#" class="slidesjs-navigation slidesjs-previous"><i class="icon-chevron-left icon-large"> 


</i></a> 
<a href="#" class="slidesjs-navigation slidesjs-next"><i class-"icon-chevron-right icon-large"» 
*</ir</a> 
</div> 
</body> 
</html> 
脚本 16-8 CSS 文件 添加 我 们 所 需 的 一 点 儿 CSS 样式 
body { 


padding: 20px; 


#slides { 
display: none; 
} 
#slides a { 
color: #333; 
} 





#slides a:hover, 
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#slides a:active { 
color: #9e2020; 
} 


div.slidesjs-container { 
margin-bottom: 10px; 
} 


.slidesjs-pagination { 
float: right; 
list-style: none; 
margin: 0; 


} 


.slidesjs-pagination li { 
float: left; 
} 


.slidesjs-pagination li a { 
display: block; 
width: 13px; 
height: 0; 
padding-top: 13px; 
background-image: url(SlidesJS/images/pagination.png) ; 
overflow: hidden; 


} 


.slidesjs-pagination li a.active, 

.slidesjs-pagination li a:hover.active { 
background-position: O -13px 

} 


.slidesjs-pagination li a:hover { 
background-position: 0 -26px 
} 


脚本 16-9 JavaScript 文件 中 的 这 几 行 jQuery 设置 幻灯 片 的 动画 效果 


$(function(){ 
$("#slides").slidesjs({ 

navigation: { 
active: false, 
effect: "fade" 

h 

pagination: { 
effect: "fade" 


speed: 800 


} 
5 





H; 
=> 使 用 jQuery 插件 


1. «link rel="stylesheet" href="SlidesJS/css/example.css"> 








<link rel="stylesheet" href="SlidesJS/css/font-awesome.min.css"> 


ut 


和 16 章 AF jQuery 的 应 用 
#8 件 随 附 推荐 样式 表 ， 可 以 将 它们 作为 一 个 包 使 用 ， 像 脚本 16-7 这 样 。 同 样 ， 之 后 会 加 载 


332 第 
jquery.slide.min.js 脚本 。 脚 本 16-8 展示 的 是 本 地 所 需 的 最 少量 CSS 代码 。 
因为 引入 了 SlideJS 插件 的 文件 ， 所 以 我 们 现在 可 以 使 用 脚本 16-9 中 的 slidejs KT o K% 























fi 
2. $("#slides").slidesjs({ 








置 就 在 这 里 完成 。 
3. navigation: { 
active: false， 
effect: "fade" 
图 16-6 所 示 。 我 们 想 让 图 
是 


我 们 想 在 幻灯 片 页 面 中 使 用 自 定义 导航 ,因此 将 active 设 为 false， 如 
像 出 现 的 时 候 具 有 淡 入 效果 ， 消 失 的 时 候 具 有 淡出 效果 ， 因 此 将 effect 设置 为 "fade" (默认 值 








b 


"slide" )。 
4. pagination: { 


effect: "fade" 
我 们 也 想 让 不 同 页 面 之 间 切 换 具 有 淡 入 淡出 效果 ， 因 此 将 pagnation 的 effect 也 设置 为 "fade"， 





b 


如 图 16-7 所 示 。 


5. effect: { 


fade: ( 
speed: 800 
PA 


这 上段 代码 使 用 了 淡 入 淡出 效果 ,我 们 真是 太 想 显摆 这 个 功能 了 ,设置 脚本 使 用 800 毫秒 添加 淡 入 





} 





} 
淡出 动画 效果 。 














图 16-7 点 击 右 下 角 的 圆 点 可 以 
在 不 同 页 面 之 间 跳 转 














16-6 ”我 们 可 以 使 用 左下 角 的 导航 
箭头 在 两 张 幻 灯 片 之 间 切 换 
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V 提示 

口 SlideJS 的 作者 是 Nathan Searles。 关 于 插件 的 信息 请 查看 slidejs.com。 下 载 网 址 : github.com/ 

nathansearles/Slides ， 支 持 网 站 : groups.goolge.com/forum/#!forum/slidesjs。 

O 跟 jQuery 和 jQuery UI 不同 , 插件 必须 先 从 作者 的 网 站 下 载 ， 然后 上 传 到 自己 的 服务 器 ,插件 
没有 固定 的 CDN。 


16.5 添加 jQuery 音频 插件 


本 例 中 ,你 会 看 到 如 何 使 用 jQuery 搬 件 来 实现 一 个 功能 齐全 的 音频 播放 器 ,播放 器 利用 了 HTMLS 
的 audio RÆ, 且 对 于 不 支持 HTMLS 的 浏览 器 使 用 Flash 提供 向 下 兼容 支持 。 页 面 加 载 时 , 仅 出 现 几 
个 小 按钮 ， 如 图 16-8 所 示 ， 但 是 按 下 播放 键 后 ， 播 放 器 会 展开 以 显示 其 所 有 功能 ， 如 图 16-9 所 示 。 























Audio player + 
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jQuery HTMLS audio player 








图 16-8 这 个 jQuery 插件 创建 了 一 个 HTMLS 音频 播放 器 。 加 载 后 ， 控 制 面板 会 被 最 小 化 


























jQuery HTMLS audio player 


Rhapsody in Blue 





播放 进度 条 回放 
音量 播放 时 间 暂停 


图 16-9 ” 单 击 播放 按钮 即 开始 播放 文件 ， 这 时 ， 你 又 可 以 看 到 熟悉 的 播放 控制 面板 了 
脚本 16-10 7E HTML 页 面 上 添加 jQuery 插件 以 提供 HTMLS 音频 播放 器 功能 


<!DOCTYPE html» 

<html> 

<head> 
<title>Audio player</title> 
<link rel="stylesheet" href="mbplayer/css/miniPlayer.css"/> 
«script src="http://code. jquery.com/jquery-2.1.0.js"></script> 
<script src="mbPlayer/inc/jquery.mb.miniPlayer.js"></script> 
«script src="mbPlayer/inc/jquery.jplayer.min.js"></script> 
<script src-"script04.js"»«/script» 

</head> 

<body> 
<h2>jQuery HTML5 audio player</h2> 
<div> 
<a class-"audio {ogg: 'mbPlayer/Rhapsody_in Blue.ogg'}" href-"mbPlayer/Rhapsody in Blue.mp3"»Rhapsody 

rin Blue</a> 
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</div> 
</body> 
</html> 
脚本 16-11 通过 jQuery 来 调用 音频 播放 器 插件 ， 其 对 应 的 JavaScript 文件 只 有 几 行 代码 
$(function(){ 
$(".audio").mb miniPlayer(( 
width: 360, 


inLine: false, 
ShowRew: true, 
ShowTime: true 
H; 
) 


D 添加 音频 播放 器 








1. <script src-"mbPlayer/inc/jquery.mb.miniPlayer.js"»«/script» 
«script src="mbPlayer/inc/jquery.jplayer.min.js"></script> 


在 脚本 16-10 中 ， 脚 本 标签 引入 音频 插件 的 两 个 部 分 。 
2. <a class="audio {ogg: 'mbPlayer/Rhapsody in Blue.ogg'}" href="mbPlayer/Rhapsody in Blue. 
mp3">Rhapsody in Blue</a> 


按照 说 明 ( 包含 在 下 载 文件 中 ) 生成 链接 ， 加 载 完成 后 ， 播 放 器 会 播放 我 们 最 喜欢 的 一 首 歌曲 的 
MP3 或 者 Ogg 版 本 。 


3. $(".audio").mb_miniPlayer({ 
width: 360, 
inLine: false, 
showRew: true, 
showTime: true 


35 
脚本 16-11 包含 了 我 们 需要 添加 的 所 有 jQuery 代码 其 他 所 需 代 码 都 由 插件 脚本 完成 了 。 第 3 
步 中 ， 我 们 将 播放 器 的 宽度 设置 为 360 像素 , 将 inline 属性 设置 成 false ( 即 它 不 属于 常规 文件 流 )， 
同时 ， 我 们 还 显示 了 回放 按钮 和 播放 时 间 。 
V 提示 
O 这 个 插件 的 作者 是 Matteo “Pupunzi” Bicocchi。 搬 件 的 网 址 是 : pupunzi.com.#mb.components/ 
mb.miniAudioPlayer/miniAudioPlayer.html, GitHub 下 载 网 址 是 : github.com/pupunzi/jquery.mb. 
miniAudioPlayer, 


O 如 对 音频 插件 有 疑问 ， 请 访问 作者 的 支持 网 站 http://jquery.pupunzi.com. 












































为 移动 设备 编写 脚本 








等 开 发 氢 域 最 新 的 重大 机 齐 ( 同时 也 是 挑战 ) 营 源 自 移动 设备 越 来 越 流行 。 现 如 今 手机 和 

平板 电脑 成 了 网 上 冲浪 ( 以 及 更 为 重要 的 在 线 购买 ) 的 重要 阵地 ， 是 时 候 积极 面 对 移 动 设 
备 了 。 本 音 将 介绍 如 何 处 理 设备 的 屏幕 旋转 与 定位 ， 从 浏览 器 启动 其 他 应 用 程序 ， 以 及 针对 特定 设备 
编写 代码 。 


17.1 改变 方向 


与 针对 台式 机 编程 相 比 ， 为 移动 设备 编程 最 大 的 区 别 在 于 设备 的 屏幕 方向 可 以 改变 ， 也 就 是 说 ， 
用 户 可 以 将 手机 从 横 屏 持 握 转 为 竖 屏 持 握 ， 或 者 从 竖 屏 持 握 转 为 横 屏 持 握 。 在 创建 供 访客 通过 台式 机 
浏览 的 网 站 时 ， 开 发 者 不 需要 考虑 方向 的 问题 ;而 在 创建 移动 网 站 时 ， 这 个 问题 比较 重要 。 

例如 ， 这 个 网 站 在 最 初 设计 的 时 候 没 有 将 移动 设备 考虑 在 内 。 现 在 检查 它 在 移动 设备 上 的 呈现 效 
AR, 看 起 来 如 图 17-1 ( 竖 屏 ) 和 图 17-2 HPE) 所 示 。 前 一 种 情况 还 过 得 去 ， 但 是 为 了 在 一 屏 里 多 显 
示 些 内 容 , 字号 可 以 再 调 小 一 些 ( 见 图 17-3 )。 后 一 种 情况 字号 就 太 大 了, 用 户 甚至 需要 手动 缩小 ( 见 
图 17-4 )。 下 面 是 具体 的 做 法 。 


eese ATAT F 7:56PM on) 
du 


i —' 
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When They Don't Pay, We Tow "Em 
Away 





























* Are you a br if 
looking to pick up an 










When They Don't Pay, We Tow 'Em 
Away 








fem * Are you a bank in 
ferment lestie in, commodo need of someone to 
porttit im blandit quam ut lacus. 











repossess an Alpaca 


Quisque ornare risus quis ligula. Phasellus 


图 17-1 最初 的 页 面 ， 坚 屏 图 17-2 最 初 的 页 面 ， 现 在 改 为 了 横 屏 
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aeeoo AJAT F 4:58 PM T5598 


When They Don't Pay, We Tow 'Em Away 


* Are you a bank in need 
of someone to repossess 
an Alpaca from a 
breeder with an 
outstanding loan? 


Are you à breeder 
looking to pick up an 
inexpensive bank 
foreclosed Alpaca? 





If you answered yes to either of these 
questions, you've come to the right place! 
Contact us now to see what we can do for you, 


Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Praesent aliquam, justo 
convallis luctus rutrum, erat nulla fermentum 
diam, at nonummy quam ante ac quam. 
Maecenas urna purus, fermentum id, molestie 
in, commodo porttitor, felis. Nam blandit quam 
ut lacus. Quisque ornare risus quis ligula. 
Phasellus tristique purus a augue condimentum 
adipiscing. Aenean sagittis. Etiam leo pede, 
rhoncus venenatis, tristique in, vulputate at, 
adio. Donec et ipsum et sapien vehicula 
nonummy. Suspendisse potenti. Fusce varius 





When They Don't Pay, We Tow 'Em Away 


* Are you a bank in need of someone to 
repossess an Alpaca from a breeder 
with an outstanding loan? 


* Are you a breeder looking to pick up an 
inexpensive bank-foreclosed Alpaca? 


If you answered yes to either of these 





urna id quam. 


Sed neque mi, varius eget, questions, you've come to the right place! 





图 17-3 ”调整 字体 大 小 后 的 竖 屏 页 面 图 17-4 调整 字体 大 小 后 ， 横 屏 页 面 显示 的 内 容 明 显 变 多 了 











脚本 17-1 一 个 普通 的 公司 网 页 
<!DOCTYPE html» 


<html> 
<head> 


«title»Welcome to Alpaca Repo</title> 


<meta 
<link 


name-"viewport" content="width=560"> 
rel="stylesheet" href="script01.css"> 


<script src="script01.js"></script> 


</head> 
<body> 


<main> 
<header> 


<img src="images/header. jpg" alt="header"> 


</header> 
<article> 


<h2>When They Don't Pay, We Tow 'Em Away</h2> 
«p class="photo"><img src="images/3alpacas. jpg" alt="alpacas">Some of the alpacas we've 
—recovered.«/p» 
«ul» 
<li><p>Are you a bank in need of someone to repossess an Alpaca from a breeder with 
>an outstanding loan?«/p»«/li» 
<li><p>Are you a breeder looking to pick up an inexpensive bank-foreclosed Alpaca? 
*</p></1i> 
</ul> 
<p>If you answered yes to either of these questions, you've come to the right place! 
—Contact us now to see what we can do for you.</p> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo 
'convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. 
—Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit 
—quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue 
"condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique 
'in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse 
—potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit 
—id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. 
^Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus 
^mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.«/p» 





<h2>H2 level heading</h2> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo 
'convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. 
‘Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit 
*quam ut lacus.Quisque ornare risus quis ligula. Phasellus tristique purus a augue 
*condimentum adipiscing.Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique 
'in, vulputate at, odio.«/p» 
«/article» 
«footer» 
«p»Copyright &copy; 2009-2014 Alpaca Repo. All rights reserved.«/p» 
«/footer» 
«/main» 
«/body» 
«/html» 


脚本 17-2 添加 一 些 自 定义 的 CSS 


body { 
font-family: Verdana, Helvetica, Arial, sans-serif; 
background-color: #666; 
color: #000; 
margin: 0; 
padding: 0; 
text-align: center; 


} 


hi, h2, h3, h4, h5, h6 { 
font-family: Cambria, "Palatino Linotype", "Book Antiqua", "URW Palladio L", serif; 


} 

main { 
width: 80%; 
margin: 0 auto; 
padding: 0; 
text-align: left; 

} 

header { 
background-color: #91A43D; 
text-align: center; 
margin: 0; 
padding: 0; 
overflow: hidden; 

} 


header img { 
width: 100%; 
max-width: 800px; 
height: 110px; 


} 


article { 
background-color: #FFF; 
padding: 10px 20px 0 1em; 


article::after { 
clear: both; 
content: ""; 
display: table; 
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.photo { 
float: right; 
margin-left: .8em; 
width: 200px; 
font-size: .8em; 
font-style: italic; 
line-height: 1em; 


} 
footer p { 
margin: 0; 
padding: 10px 0; 
background-color: #DDD; 
text-align: center; 
font-size: .8em; 
} 
@media only screen and (max-device-width: 1024px) { 
main { 
width: 100%; 
} 
nav { 
font-weight: normal; 
} 
hi, h2, h3, h4, h5, h6 { 
font-family: Albany, Georgia, "Times New Roman", serif; 
.landscape ( 
font-size: .5em; 
) 
portrait { 
font-size: .8em; 
} 
} 


@media only screen and (min-resolution: 192dpi), only screen and (webkit-min-device-pixel-ratio:2), 
only screen and (min-device-width:768px) and (min-device-height:768px) and (max-device-width:1024px) { 
header img { 
width: 640px; 
} 
} 


脚本 17-3 再 添加 一 些 JavaScript 代码 ， 响 应 式 设计 让 页 面 变 得 更 具有 吸引 力 


addEventListener("load", resetPage, false); 
addEventListener("orientationchange", resetPage, false); 


function resetPage() { 
if (Math.abs(window.orientation) == 90) { 
classVal = "landscape"; 


else { 
classVal = "portrait"; 
} 


document. getElementsByTagName("main")[0].setAttribute("class", classVal); 





> 处 理 方向 改变 


1. @media only screen and (max-device-width:1024px) { 
main { 
width: 100%; 








nav { 
font-weight: normal; 


} 
h1, h2, h3, h4, h5, h6 { 
font-family: Albany, Georgia, "Times New Roman", serif; 


.landscape { 
font-size: .5em; 


.portrait { 
font-size: .8em; 


} 
这 里 的 HTML ( 见 脚本 17-1) 和 CSS ( 见 脚本 17-2 ) 都 很 常见 ， 除 了 上 面 的 这 段 CSS。 我 们 关心 
的 是 最 后 两 条 规则 ， 根 据 应 用 .landscape 或 者 .portrait 类 来 确定 font-size (字体 大 小 )。 不 过， 你 
会 发 现 这 两 个 类 都 没有 用 在 HTML 中 ， 而 是 由 JavaScript 设置 。 
2. addEventListener("1oad" ,resetPage, false); 



































addEventListener("orientationchange" ,resetPage, false); 
在 JavaScript 代码 ( 脚本 17-3) 中 ,我 们 首先 添加 了 两 个 事件 处 理 程序 : load ( 前 面 已 经 出 现 过 
多 次 ) 和 orientationchange。 两 者 被 触发 都 会 调用 resetPage() K% 


3. if (Math.abs(window.orientation) == 90) { 
classVal = "landscape"; 





























else { 
classVal = "portrait"; 











ms 对 象 的 orientation 属性 有 4 个 值 0 CUBE, DNE E). 90 ( 横 屏 ,向 左 )、180 (E, 
WRH F ) 和 -90 ( 横 屏 ， 向 右 )。 
在 restepPage() 函 数 中 ， 如 果 window.orientation 的 绝对 值 为 90， 那 么 我 们 知道 设备 处 于 横 屏 模 
式 ， 不 管 是 向 左 还 是 向 右 ; 否则 处 于 竖 屏 模 式 。 对 于 这 两 种 情况 ， 我 们 都 相应 地 设置 classVal 的 值 。 
4. document.getElementsByTagName( "main")[0].setAttribute("class",classVal); 
最 后 ， 我 们 将 存储 的 classVal 值 作为 main 标签 的 一 个 class 属性 。 
V 提示 
O 第 1 步 中 emedia 查询 的 作用 是 只 有 运行 在 移动 设备 上 时 才 应 用 这 里 的 CSS。 脚 本 17-2 最 后 的 
@media 查询 限定 ， 只 有 运行 在 高 分 辨 率 移 动 设备 上 时 才 应 用 此 处 的 CSS。 
O media 查询 不 在 本 书 介绍 范围 之 内 ， 如 果 想 进一步 了 解 @media 查询 ， 可 以 查阅 HTML 或 CSS 
参考 书 ( 我 们 的 选择 是 Elizabeth Castro 和 Bruce Hyslop 合 著 的 《HTMLS5 与 CSS3 基础 教程 (第 
8 版 )》)。 
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调试 移动 设备 
当 开 发 人 员 调 试 网 站 的 时 候 ， 他 们 手边 不 太 可 能 备 齐 所 有 的 10S 和 Android 设备 。 所 幸 苹果 和 
谷歌 分 别提 供 了 Android 模拟 器 和 iOS 模拟 器 ， 为 大 家 省 下 了 一 大 笔 开 销 ， 要 知道 各 种 型 号 的 手机 
和 平板 电脑 烧 钱 不 少 呢 。 下 载 两 家 公司 提供 的 SDK (软件 开发 工具 包 ) 会 自 带 模拟 器 。 
口 Android 模拟 器 : 可 从 developer.android.com/sdk 上 下 载 跨 平 台 的 Android SDK。 要 详细 了 解 
该 模拟 器 的 工作 原理 ， 可 访问 developer.android.com/tools/devices/emulator.html. 
O iOS 模拟 器 :苹果 公司 将 其 模拟 器 与 Xcode 开发 者 工具 绑 在 了 一 起 .可 从 developer.apple.com/ 
xcode/downloads/ F 3,5] Xcode. iOS 模拟 器 的 用 法 很 简单 , 但 很 可 惜 , 它 只 能 在 Mac 上 使 用 。 
这 两 个 模拟 器 都 是 免费 的 。 
V 提示 
口 在 iOS 上 调试 网 页 有 一 条 非常 棒 的 技巧 : 在 iOS 模拟 器 中 查看 网 页 时 运行 Safari, 切换 到 Safari, 
查看 Develop ( 开发 ) 菜单 ， 会 看 到 一 个 新 选项 : iPhone (A iOS ) Simulator ( 见 图 17-5 )。 
这 样 ， 你 就 可 以 在 加 载 到 模拟 器 中 的 页 面 上 使 用 Safari 的 开发 工具 了 (如 Web Inspector )。 





一 script04.html 


Show Snippet Editor 
Show Extension Builder 


vni 
Disable Caches 


Disable Images 
Styl 


al File Restrictions 
v Enable WebGL 


v Allow JavaScript from Smart Search Field 











图 17-5 有 了 这 个 方便 的 小 荣 单项 ， 就 能 够 使 用 台式 机 上 的 全 套 工具 调试 移动 页 面 
表 17-1 移动 事件 



































事 件 触发 动作 
gesturestart 两 个 或 多 个 手指 触摸 屏幕 
gesturechange 手指 触 屏 位 置 发 生变 化 
gestureend 结束 手势 
orientationChange 旋转 设备 
touchstart 手指 触摸 屏幕 
touchmove 手指 在 触 屏 时 移动 
touchend 结束 触摸 
touchcancel 浏览 器 自身 取消 触摸 追踪 
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表 17-2 触摸 属性 















































属 性 * xX 

clientx 触摸 位 置 相 对 于 窗口 视 口 的 坐标 
clientY 

identifier 当前 触摸 的 唯一 标识 符 

pageX 触摸 位 置 在 页 面 坐 标 系 中 的 坐标 
pageY 

screenX 触摸 位 置 在 屏幕 坐标 系 中 的 坐标 
screenY 

target 触摸 的 目标 


表 17-3 ”GestureEvent 对 象 


属 性 AOR 





altKey initGestureEvent 
ctrlKey 

metaKey 

rotation 

scale 

shiftKey 


target 


4217-4 TouchEventxtR 


m 性 AOR 





altKey initTouchEvent 
ctrlKey 

metaKey 

rotation 

scale 

shiftKey 

targetTouches 

changedTouches 


touches 


表 17-5 DeviceMotionEventx]$& 








E 性 方 ” 法 
acceleration initDeviceMotionEvent 
accelerationIncludingGravity 
interval 
rotationRate 

表 17-6 Device0rientationEvent 对 象 

E 性 5 ^d 
alpha initDeviceOrientationEvent 
beta 
gamma 


webkitCompassAccuracy 


webkitCompassHeading 
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17.2 ”处 理 触 摸 事 件 


你 很 快 就 会 发 现 ， 为 移动 设备 进行 开发 常常 需要 采取 一 些 折 中 策略 。 一 个 常见 的 例子 是 ， 放 弃 使 
用 悬 停 事 件 ， 而 采用 触摸 事件 。 这 个 小 示例 允许 我 们 通过 和 触 屏 随意 移动 页 面 中 的 元 素 。 脚 本 17-4 为 这 
个 例子 的 HTML 代码 ， 脚 本 17-5 为 CSS 代码 ， 脚 本 17-6 为 JavaScript 代码 。 


脚本 17-4 这 个 HTML 页 面 非常 单调 无 趣 


<!DOCTYPE html> 
<html> 
<head> 
<title>Drag n' drop touch demo</title> 
«meta name-"viewport" content="width=device-width"> 
<link rel="stylesheet" href="script02.css"> 
<script src="script02.js"></script> 
</head> 
<body> 
<div id="draggable"> 
Drag me! 
«p id="boxLocation"></p> 
</div> 
</body> 
</html> 


脚本 17-5 少量 样式 设置 让 它 看 起 来 更 吸引 人 


#draggable { 
position: absolute; 
background-color: #FFC; 
border: 5px solid yellow; 
width: 100px; 
height: 100px; 
padding: 50px; 
text-align: center; 
font-family: Albany, Georgia, "Times New Roman", serif; 












































} 
脚本 17-6 移动 元 素 ， 效 果 形 象 生动 


window.addEventListener( 
"load", 
function() { 
document. getElementById("draggable").addEventListener("touchmove" moved, false); 
b 


false 
5 


function moved(evt) ( 
evt.preventDefault(); 
var dragBox = document.getElementById("draggable"); 


dragBox.style.left = (evt.changedTouches[0].pageX - 100) + "px"; 
dragBox.style.top = (evt.changedTouches[0].pageY - 100) + "px"; 
document.getElementById("boxLocation").innerHTML - "Top: " 
Left: " + dragBox.style.left; 


+ dragBox.style.top + "<br> 
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p^ 处 理 触摸 事件 








1. window.addEventListener( 


"lo 
fun 


)5 


ad", 
ction() { 
document . getElementById("draggable").addEventListener("touchmove" ,moved, false); 


初次 加 载 页 面 ( 见 图 17-6 ) 我 们 希望 给 id 为 draggable 的 元 素 添 加 一 个 事件 处 理 程序 。 新 事件 
touchmove 会 在 每 次 被 触发 ( 用户 滑 动 元 素 ) 时 调用 moved() RŽ 


2. evt.p 
var d 





g 
$ 
$ 
o 
E 
§ 
8 
$ 
a 
: 
o 
3 
a 








图 17-6 初次 加 载 页 面 (在 Android 设备 中 显示 ) 


reventDefault(); 
ragBox = document.getElementById("draggable"); 





通常 ， 用 户 在 屏幕 上 滑动 手指 会 触发 一 个 选择 。 我 们 不 希望 这 样 ， 因 此 moved() 函 数 在 开始 时 就 阻 
止 了 默认 行为 。 接 下 来 创建 一 个 新 变量 dragBox， 由 此 我 们 不 必 不 停 地 输入 document .getElementById。 





3. dragB 
dragB 














WARS IC A 








ox.style.left = (evt.changedTouches[0].pageX - 100) + "px"; 
ox.style.top = (evt.changedTouches[0].pageY - 100) + "px"; 





重 置 盒子 的 top 和 left 属性 实际 上 就 是 移动 盒子 。 乍 一 看 有 些 不 好 理解 ， 容 我 们 慢 慢 道 来 。 
EH top 和 left 可 以 移动 元 素 的 左上 角 , 但 很 有 可 能 这 并 不 是 手指 ( 或 触 控 笔 ) 真 正 触 屏 的 位 置 。 





























9 左上 角 重 置 为 手指 触 屏 的 位 置 ， 看 起 来 元 素 的 移动 就 会 显得 过 于 跳跃 。 








手指 更 有 可 能 指向 元 素 中 心 。 要 基于 元 素 中 心 的 运动 来 移动 左上 角 , 我 们 需要 从 左 端 位 置 与 顶端 








位 置 (BPA 


E 标 与 纵 坐 标 ) 中 各 减 去 100 像素 。 这 两 个 位 置 分 别 对 应 于 evt. changedTouches[0] .pageX 
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和 evt.changedTouches[0].pageY。 


4. document. getElementById("boxLocation").innerHTML = "Top: " + dragBox.style.top + 


"<br>Left: " + dragBox.style.left; 
最 后 ， 为 了 让 大 家 看 清楚 我 们 确实 移动 了 元 素 ， 图 17-7 中 显示 了 元 素 左 上 角 的 当前 位 置 。 


ee9ec AT&T F 5:39 PM 77% o> 
di.dropboxusercontent.com 



































图 17-7 ”这 是 将 元 素 摆弄 一 阵 后 的 样子 





v 提示 
口 如 果 对 重 置 元 素 位 置 的 方法 不 太 熟 悉 ， 可 以 看 看 脚本 8-9 和 脚本 11-14。 


17.3 ”针对 不 同 设备 编写 特定 代码 


不 同 设备 的 制造 商 不 同 ， 运 行 不 同 的 系统 ， 使 用 不 同 的 浏览 器 ， 因 此 它们 有 时 会 表现 不 同 。 这 样 
的 结果 是 ， 我 们 有 时 候 需 要 针对 某 些 设备 编写 代码 。 这 个 例子 中 ， 我 们 针对 的 是 Android 设备 。 


脚本 17-7 ”添加 少量 代码 ， 只 针对 Android 设备 添加 样式 


window.addEventListener( 
"load", 
function() { 
document. getElementById("draggable") .addEventListener("touchmove" ,moved, false); 
androidSS(); 
































b 
false 


); 


function androidSS() { 
if (navigator.userAgent.match(/android/i)) { 
var fileref = document.createElement("link"); 
fileref.setAttribute("rel","stylesheet"); 
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fileref.setAttribute("href", "scripto3.css"); 
document. getElementsByTagName("head" )[0].appendChild(fileref) ; 


} 


function moved(evt) { 
evt.preventDefault(); 
var dragBox - document.getElementById("draggable"); 


dragBox.style.left = (evt.changedTouches[0].pageX - 100) + "px"; 
dragBox.style.top = (evt.changedTouches[0].pageY - 100) + "px"; 


document .getElementById("boxLocation").innerHTML = "Top: " + dragBox.style.top + "<br>Left: " + 
*dragBox.style. left; 
} 


脚本 17-8 ”这 个 样式 表 只 会 在 Android 设备 中 加 载 


#draggable { 
font-family: "Droid Sans", sans-serif; 





> 针对 不 同 设备 编写 特定 代码 








1. window.addEventListener( 
"load", 
function() { 
document. getElementById("draggable") .addEventListener("touchmove" ,moved, false); 
androidSS(); 





这 个 任务 的 HTML 与 CSS 与 上 一 个 例子 完全 相同 ， 但 现在 我 们 还 希望 ， 仅 在 用 户 使 用 Android 
设备 时 加 载 另 一 个 样式 表 。 这 由 androidSs() 函 数 来 处 理 , 它 会 在 页 面 最 初 加 载 时 被 调用 , 如 脚本 17-7 
所 示 。 

2. function androidSS() { 

if (navigator.userAgent.match(/android/i)) { 








var fileref = document.createElement("link"); 

fileref.setAttribute("rel","stylesheet") ; 

fileref.setAttribute("href","script03.css"); 

document .getElementsByTagName( "head" ) [0] .appendChild(fileref) ; 

} 
} 
navigator 对 象 有 一 个 名 为 userAgent 的 属性 , 该 属性 包含 一 个 描述 设备 的 字符 串 。 如果 userAgent 

属性 含有 字符 囊 "android" ,我 们 会 添加 指向 男 一 个 样式 表 的 链接 ， 如 脚本 17-8 所 示 。Android 用 户 现 
在 会 看 到 可 拖 动 框 中 无 衬 线 字体 的 文本 ( 见 图 17-8 )。 
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图 17-8 同样 的 页 面 ， 新 的 样式 
V 提示 


























口 这 个 技术 不 限于 引入 额外 的 样式 表 ， 它 还 可 以 用 于 有 针对 性 地 编写 脚本 。 
O 目前 而 言 ， 很 遗憾 ， 还 没有 适用 于 所 有 移动 设备 的 字体 。 要 了 解 有 哪些 字体 可 用 ， 建 议 查看 
jordanm.co.uk/tinytype 上 的 兼容 列表 ,该 列表 涵盖 了 iOS , Android Windows Phone fll BlackBerry 























设备 。 例 如 ，Android 设备 出 三 时 只 有 4 种 字体 : Droid Sans, Droid Serif, Droid Sans Mono 和 
Roboto。 


17.4 定位 设备 








£z 


Te NC WY — A REDE Zr Rb ee dE TT VA Ee 
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定 自 己 的 当前 位 置 ， 甚至 可 以 为 网 站 定位 (需要 少 
it JavaScript 代码 ) 重要 的 是 不 仅 能 确定 我 们 在 哪里 ,还 可 以 启动 其 他 应 用 , 即 在 浏览 器 外 部 而 不 是 
内 部 启动 地 图 。 


脚本 17-9 这 个 简单 的 HTML 页 面 含有 一 个 作用 于 移动 设备 的 强大 功能 
<!DOCTYPE html» 
<html> 


<head> 





: ADNA 


<title>Form example«/title» 


«meta name-"viewport" content-"width-device-width"» 


«script src="script04.js"></script> 
«/head» 


<input type="text" pattern-"[0-9]*" placeholder-"Zip code"><br> 
<input type="email" placeholder= "Enter your email address" size="40"> 
</p> 
<p> 
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Lat: <input type="text" id-"lat field" name="latitude"><br> 
Lng: <input type="text" id="Ing field" name-"longitude"» 














</p> 
<a href="http://maps.apple.com?z=16&%amp;11="_id="mapQuery">View address on map</a> 
</body> 
</html> 
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图 17-10 iPhone 上 苹果 公司 的 地 图 应 用 
很 好 地 显示 了 作者 的 当前 位 置 























图 17-9 这 里 是 我 们 当前 的 纬度 和 经 度 ， 但 
真正 重要 的 是 点 击 链接 后 的 结果 











脚本 17-10 Xfx JavaScript 代码 填写 纬度 和 经 度 字段 ， 然 后 建立 地 图 链接 
window. addEventListener("load", getLocation, false); 


function getLocation() { 
if (navigator.geolocation) { 
navigator. geolocation. getCurrentPosition( 
function(position) { 
document. getElementById("lat_field").value 
document.getElementById("lng field").value 


position.coords.latitude; 
position.coords.longitude; 


document.getElementById("mapQuery").href += position.coords.latitude + "," + 


'»position.coords.longitude; 


} 
E 
} 
} 


1. <a href-"http://maps.apple.com?z-168amp;ll-" id-"mapQuery"»View address on map</a> 17 


脚本 17-9 包含 了 建立 图 17-9 中 的 链接 所 需 的 HTML 代码 。 点 击 该 链接 会 自动 启动 设备 的 地 图 应 
JH. WE 17-10 所 示 《〈 这 里 是 苹果 公司 的 地 图 应 用 )。 
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2.if (navigator.geolocation) { 


navigator.geolocation.getCurrentPosition( 














在 脚本 17-10 F, getLocation() KE H ri IEEE BLA. TPR ee ft navigator 对 象 是 否 
含有 geolocation 属性 ， 如 果 含 有 ， 则 调用 该 属性 的 getCurrentPosition() KZ 
3. function(position) { 
































document.getElementById("lat field").value 


7 position. coords. latitude; 
document.getElementById("lng field") .value 


position.coords. longitude; 


将 带 position 参数 的 匿名 函数 传 给 getCurrentPosition() 函 数 。 使 用 position 参数 , 这 段 脚本 可 
以 获得 我 们 的 经 度 和 纬度 ， 并 将 其 显示 在 页 面 上 ( 见 图 17-9 )。 


4. document.getElementById("mapQuery").href += position.coords.latitude + "," + position. 























coords. longitude; 


这 段 脚本 最 后 将 经 度 和 纬度 值 附 加 到 地 图 查询 链接 上 ， 从 而 精准 地 锁定 了 我 们 的 当前 位 置 。 
v 提示 

















O 在 第 1 步 中 ，11 显然 代表 纬度 和 经 度 。z 代表 缩放 (zoom )， 即 你 希望 将 地 图 缩小 或 扩大 到 什 
么 程度 。z 值 越 大 ， 地 图 越 详细 。 

口 好 消息 是 ， 苹 果 和 谷歌 的 地 图 服务 都 使 用 同样 的 z 和 11 属性 。 

口 坏 消息 是 , 没有 一 个 可 以 用 于 所 有 设备 的 地 图 URL, 第 1 步 中 的 URL ( maps.apple.com ) 只 适 






































用 于 iOS 设备 (如 iPhone fil iPad )。 在 Android 设备 上 ， 你 需要 使 用 前 一 个 任务 中 的 流程 加 载 
maps.google.com。 这 并 不 是 说 maps.google.com 不 能 用 在 iOS 设备 上 ， 但 要 想 使 用 ， 首 先 需 要 
安装 谷歌 地 图 应 用 。 这 一 点 并 非 你 所 能 掌控 的 ， 因 此 要 在 代码 中 处 理 这 两 种 情形 。 























口 页 面 初次 加 载 会 弹出 一 个 提示 对 话 框 , 询问 是 否 允 许 网 站 获取 设备 的 当前 位 置 数据 。 用 户 必须 
允许 此 功能 才能 进行 定位 。 
a x 17-7 给 出 了 其 他 的 一 些 应 用 示例 ， 这 些 应 用 可 以 用 不 同 的 链接 目标 来 启动 。 








表 17-7 ”启动 移动 应 用 






































href 值 结 R 
mailto:me@example.com 启动 Mail 应 用 
facetime:me@example.com 启动 FaceTime 应 用 并 开始 聊天 ( 仅 限 于 iOS ) 
tel:555-1212 转换 到 电话 应 用 并 拨号 
sms:555-1212 启动 短信 应 用 ( 如 iOS 上 的 短信 应 用 ) 
http://www. youtube. com 启动 YouTube 应 用 ( 如 果 可 用 ) 














bookmarklet 








Fev 知道 ， 可 以 使 用 JavaScript 从 网 页 内 部 控制 Web Dass (HE, CERES CHUTE F , 
NS say 以 使 用 JavaScript 控制 浏览 器 ， 所 用 的 技术 称 为 bookmarklet。bookmarklet 是 一 种 特殊 
的 书签 ( 用 正 的 术语 来 说 是 收藏 来 ,有 时 候 bookmarklet 也 称 为 favelet ), 其 中 包含 对 浏览 器 的 JavaScript 
解释 器 的 调用 ,而 不 是 外 部 URL. bookmarklet 中 的 JavaScript 可 以 做 任何 事情 ， 比 如 获得 图 像 的 相关 
信息 ， 给 出 一 个 单词 的 定义 以 及 调整 浏览 器 窗口 。 如 果 你 掌握 了 JavaScript， 就 很 容易 添加 这 种 功能 ， 
从 而 使 你 的 浏览 器 成 为 更 智能 化 、 更 好 的 工具 。 
bookmarklet 与 其 他 JavaScript 代码 不 太一 样 ， 因 为 它们 有 一 个 重要 而 有 意思 的 格式 限制 : 它们 必 
须 写 在 一 行 中 。 要 使 用 分 号 把 命令 连 在 一 起 。 
在 本 章 中 ， 我 们 将 介绍 一 些 有 用 的 bookmarklet， 只 需 稍 费 点 儿 工 夫 ， 你 就 能 够 编写 出 自己 的 


bookmarklet。 









































18.1 第 一 个 bookmarklet 


脚本 18-1 确实 不 是 个 很 让 人 兴奋 的 脚本 , 它 是 我 们 常见 的 Hello World 脚本 的 变 体 。 但 重要 的 是 ， 
你 让 Web 浏览 器 执行 了 某 些 操作 , 而 没有 加 载 网 页 。 这 个 示例 还 演示 了 如 何在 各 种 浏览 器 中 创建 和 使 
用 bookmarklet。 














脚本 18-1 这 个 bookmarklet 返回 Hello World 


javascript:alert('Hello World'); 


=> 在 Firefox 中 创建 bookmarklet 














1. 在 Bookmarks 菜单 上 ， 选 择 Show All Bookmarks ( 见 图 18-1). Library 窗口 打开 。 
2. 在 左 栏 中 ， 选 择 Bookmarks Toolbar。 在 上 面 的 工具 栏 中 ， 选 择 Action 菜单 (在 Mac 中 ， 见 图 
18-2 ) BY Organize 菜单 (在 Windows 中 ， 见 图 18-3 )， 然 后 选择 New Bookmark. 
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New Tab Bookmarks > Show All Bookmarks Nimes 
Be New Private Window History E Bookmark This Page Ctrl D 

P b Downlosds t 

Find... 起 Add-ons E Bookmarks Toolbar 

Save Page As. Options ”| E Recently Bockmarked 

Email Link... Heip > | Recent Tags 
= Print. d 

Get Bookmark Add-ons 

Web Developer * Mozilla Firefex 

Full Screen [BB Backup Brair 

Set Up Sync... @ = Healdsburg Weather 
B ox 


Unsorted Bookmarks 


图 18-1 Firefox (图 中 是 Windows 版 本 ， 但 是 Mac 版 本 
是 相似 的 ) 允许 用 户 选择 Show All Bookmarks, 




















在 Library 中 输入 bookmarklets 


eoo Library 








New Folder. 
Q Tage New Separator Camne Started Mts www moz com/en-US/Nr 
v dun Latest Headlines 


Delete Dei 


Name: “Moat Visited 





18-2 ”苹果 机 上 的 Firefox TE Action 菜单 中 


提供 New Bookmark 菜单 项 


3. 在 Name 字段 中 ， 输 入 希望 出 现在 工具 栏 上 的 名 称 。 在 这 个 示例 中 ,输入 Hello. 
4. 在 Location 字段 中 ( ILEI 18-4 )， 输 入 javascript:alert('Hello World' );， 然 后 单 击 Add. 








[Nome Book-neres Toolbar 








@ Library Scr) 
€ Dome | I Vems- gy mport and Backup ~ 
|> @ Hen Nen Bookmark 1 = Tags Location 
Hom — New Falder.. ™ | Most Visited 
Tagi os Getting Started het: /www.mozila.com/en-US/.. 
us h Latest Hesdines 
& Be : White tet javascript: (function vartiUnuS... 
Be 
4 Sopy (be 











单 中 提供 New Bookmark 菜单 项 


这 时 会 返回 到 Library 窗口 。 








图 18-3 Windows 上 的 Firefox 在 Organize 菜 





图 18-4 在 Firefox 中 ， 在 NewBookmark 对 话 村 











Name: Hello 

Location: javascript:alert(‘Hello World"); 

Tags: Separate tags with commas (v) 
Keyword: | ] 
Description: 


_] Load this bookmark in the sidebar 


. Cancel | Add 














TH 
d 





向 Location 字段 添加 bookmarklet 代码 


5. 关闭 Library 窗口 。 新 按钮 应 该 出 现在 Bookmarks Toolbar 上 。 单 击 这 个 按钮 就 会 激活 命令 , 显 


示 一 个 包含 文本 “Hello World” 的 警告 框 。 
V 提示 





O 如 果 在 Firefox 中 没有 看 到 Bookmarks Toolbar ,那么 可 以 通过 选择 View—Toolbars—Bookmarks 


Toolbar 来 显示 它 。 


=> 在 Safari 中 创建 bookmarklet 








1. 确保 View 菜单 中 的 菜单 项 显示 Hide Favorite Bar 而 不 是 Show Favorite Bar, 从 而 保证 Favorites 





Bar 可 见 。 


2. YE Address Bar 中 ,输入 javascript:alert('Hello World');. 
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3. 将 地 球 图 标 (输入 文本 的 左边 ) 从 Address Bar 拖 动 到 Favorites Bar 上 ， 并 且 释 放 鼠 标 按 钮 。 
此 时 出 现 一 个 文本 字段 ， 要 求 我 们 输入 新 书签 的 名 称 ( 见 图 18-5 )。 


























javascript:alert('Hello?620v 











图 18-5 在 Address Bar 中 输入 bookmarklet 代码 ， 并 且 将 它 拖 动 到 Favorites Bar E, 
Safari 就 会 提示 输入 bookmarklet 的 名 称 


4. 输入 bookmarklet 的 名 称 。 
新 的 bookmarklet 以 按钮 形式 出 现在 Favorites Bar 中 ， 单 击 这 个 按钮 就 会 激活 命令 。 








v 提示 
O 基于 自己 的 偏好 ,也 可 以 选择 Bookmarks 一 Edit Bookmarks, 将 bookmarklet 从 Favorites Bar 转 
移 到 Bookmarks 菜单 中 。 





O 要 想 从 Safari Favorites Bar 中 删除 bookmarklet， 应 该 将 它 拖 动 到 浏览 器 窗口 中 。 它 会 显示 一 段 
烟雾 动画 ， 然 后 就 消失 了 。 如 果 意 外 地 删除 了 不 该 删除 的 书签 ， 可 以 按 Cmd-Z 来 恢复 它 。 


bookmarklet 的 起 源 


bookmarklet 的 想法 最 初 来 自 Netscape JavaScript Guide， 它 指出 如 何在 Personal Toolbar 中 添加 
JavaScript。 现 在 主持 Bookmarklets.com 站 点 的 Steve Kangas 发 明了 术语 bookmarklet。 他 的 Web 站 
点 (Www.bookmarklets.com ) 虽然 近 几 年 没 怎么 变化 ,但 包含 数 百 个 有 用 的 bookmarklet, AH Rw 
及 一 些 皮 毛 。 得 到 他 的 允许 ， 本 章 中 的 一 些 示例 参考 了 该 站 点 上 的 脚本 。 


= 在 Chrome 中 创建 bookmarklet 


1. fiii Bookmarks 菜单 栏 ， 选 择 Add Page ( 见 图 18-6 )， 出 现 Add Page 对 话 框 。 

2. 确保 下 面 的 Bookmarks Bar 高 亮 显 示 ， 然 后 在 Name 字段 输入 Hello. 

3. Æ URL 字段 输入 javascript:alert('Hello World'); (如 图 18-7 所 示 )， 并 单 击 Save。 此 时 新 
的 bookmarklet 就 以 按钮 的 形式 出 现在 Bookmarks Bar 中 。 单 击 这 个 按钮 就 会 激活 命令 。 


















































BOO, wm 
C fi |^ 
A Open All Bookmarks 
Open All Bookmarks in New Window 
Open All Bookmarks in Incognito Window 
Name: Hello 
URL: |javascript:alert(' Hello World!'); 
Bookmarks Bar 
Other Bookmarks 
Add Folder : 
Bookmark Manager 
Show Apps Shortcut 
NPN SOONERS Ier New folder | Cancel jJ .— Save 
Ly ER M. H ez 
18-6 在 Chrome 中 ， 从 Bookmarks 菜单 栏 中 选 图 18-7. 7E Chrome 对 话 框 的 URL F 








择 “ 添 加 网 页 ” 即 可 添加 bookmarklet 段 输入 bookmarklet 的 代码 
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V 提示 
口 Chrome 有 个 特别 怪异 的 行为 : 必须 在 网 页 上 才能 运行 bookmarklet。 也 就 是 说 , 普通 的 New Tab 
页 面 无 法 打开 bookmarklet， 用 户 必 须 首 先 打 个 某 个 网 页 ， 任 何 网 页 都 行 。 


> 在 IE 中 创建 bookmarklet 


1. 在 Favorites 菜单 中 ， 选 择 Add to Favorites, Add a Favorite 对 话 框 出 现 ( 见 图 18-8 )。 

2. 在 Name 字段 中 ,输入 Hello. 

3. 在 对 话 框 的 Create in 部 分 中 ,选择 Favorites Bar 文件 夹 以 确保 新 的 书签 出 现在 Favorites Toolbar 
中 ， 单 击 Add 按钮 。 

4. 右 击 Links Toolbar 中 新 的 “Hello”bookmarklet， 选 择 Properties, Properties 对 话 框 出 现 。 在 
URL 字段 中 ,输入 javascript:alert('Hello World'); ( 见 图 18-9 )， 如 果 我 们 对 IE 分 配给 按钮 的 图 
标 满意 ( 它 往 往 是 当前 网 页 的 图 标 )， 那 么 单 击 OK 按钮 。 



































2 | Hello Properties = 


General | Web Document | Security | Details | Previcus Versions 
rd Hello 


URL Javascriptalert( Hello World);| 





Shortcut key: None 





























Visits Unknown 
| Change Icon... 
Add a Favorite x) 
Add a Favorite 
A Add this webpage as a favorite. To access your favorites, visit the 
Favorites Center. 
Name: Hello 
pe Favorites 
|W Favortes Bar 
_} Microsoft Websites ly 
局 MSN Websites SS 
| Windows Live OK Cancel Apply 
图 18-8 这 里 是 Add a Favorite 对 话 框 图 18-9 再 次 修改 属性 ， 将 JavaScript 
代码 添加 到 bookmarklet 





5. 可 选 ) 如 果 希 望 改变 图 标 ， 那 么 单 击 Properties 对 话 框 中 的 Change Icon, Change Icon 对 话 框 
出 现 ， 选 择 我 们 需要 的 图 标 ， 单 击 OK 按钮 ， 然 后 再 次 单 击 OK 按钮 以 关闭 Properties 对 话 框 。 
6. 如 果 适 当地 设置 了 IE 的 安全 设置 ， 那 么 应 该 会 出 现 Problem with Shortcut 对 话 框 。 单 击 Yes 

















按钮 。 
7. 单 击 Links Toolbar 上 的 Hello 按钮 来 激活 命令 。 
V 提示 


O 默认 情况 下 ,IE 会 隐藏 Favorites Bar。 要 显示 它 ， 需 右 击 窗口 顶部 的 工具 栏 ， 并 在 弹出 的 快捷 
菜单 中 选择 Favorites Bar。 
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bookmarklet E IE 安全 性 
微软 Windows 的 IE 的 每 个 版 本 都 有 许多 安全 问题 ， 这 并 不 是 什么 秘密 。 微 软 以 各 种 各 样 的 方 
式 解 决 这 些 问题 。Windows XP Service Pack 2 主要 致力 于 提高 整个 Windows, 包括 IE6 的 安全 性 ( 顺 
便 说 一 句 ， 如 果 你 仍 在 使 用 IE 6， 建 议 你 立即 升级 )，IE 7 会 集成 更 多 的 安全 特性 ，IE 7 最 初 计划 
在 Windows Vista 之 后 发 布 ， 但 是 Vista 的 发 布 日 期 多 次 推迟 ,I 7 提前 发 布 了 。Vista 增加 了 一 些 
安全 特性 ，Windows fe IE 的 后 续 版 本 进一步 增强 了 安全 性 。 

我 们 的 测试 表明 ，bookmarklet 的 表现 在 各 版 本 之 间 是 不 一 致 的 。 我 们 发 现 ， 一 些 bookmarklet 
能 在 茶 些 页 面 上 运行 , 还 有 一 些 bookmarklet 根本 无 法 运行 ， 具 体 情 况 取 决 于 在 卫 中 启用 了 哪些 
安全 设置 。 这 些 设置 包括 是 否 打 开 了 弹出 窗口 拦截 ,以 及 Tools 一 Internet Options 的 Security 选项 卡 
中 的 许多 设置 。 简 单 地 说 ,由 于 在 契 中 添加 了 更 多 的 安全 层 , bookmarklet 在 IE 中 运行 起 来 更 困难 
了 。 通 过 修改 安全 设置 ， 可 能 会 使 更 多 的 bookmarklet 能 够 在 IE 中 运行 ,但 是 因为 下 在 安全 问题 
FAI RIRA, RTENE RARA. 

我 们 的 建议 是 : 如 果 必 须 在 降低 正 的 安全 程度 和 不 能 运行 bookmarklet 之 间作 出 选择 ， 那 么 不 如 改 
用 Firefox, Safari 或 者 Chrome。 这 会 解决 许多 浏览 器 安全 问题 ， 而 且 会 得 到 一 致 的 bookmarklet 功能 。 


bu 


J 


18.2 ”改变 页 面 的 背景 颜色 








脚本 18-2 很 简单 ,但 是 功能 强大 。 你 是 否 遇 到 过 这 样 的 情况 : 你 访问 的 一 个 站 点 包含 许多 有 用 的 
信息 , 但 是 站 点 的 背景 颜色 与 文本 颜色 太 接 近 ， 以 致 信息 很 难 阅读 ?更 糟糕 的 情况 是 ， 页 面 的 作者 使 
用 很 刺眼 的 颜色 ， 使 你 的 眼睛 很 疲劳 。 这 个 小 小 的 bookmarklet 就 能 够 解决 这 些 问题 。 注 意 ， 在 这 种 



































情况 下 ， 是 使 用 bookmarklet 改变 你 查看 别人 页 面 的 方式 一 一 这 正 是 bookmarklet 的 特殊 之 处 。 当 然 ， 
它 不 会 改变 实际 的 页 面 ， 仅 仅 是 改变 浏览 需 显 示 页 面 的 方式 。 
脚本 18-2 这 个 脚本 将 背景 颜色 改 为 白色 ， 它 会 大 大 改进 设计 不 当 的 页 面 的 显示 效果 
javascript:void(document .body.style.background="#FFF' ); 
> 改变 页 面 的 背景 颜色 



































口 javascript: void(document.body.style.background='#FFF') ; 



























































这 个 脚本 使 用 document.body.style.background 对 象 并 且 将 它 重新 设置 为 白色 。 现 在 ,我 们 可 以 
清楚 地 看 到 页 面 上 的 文本 了 ， 如 图 18-10 和 图 18-11 所 示 。 
Q Movila Files = Ils) FS Mesilla Firefox >> ecd 
Bie Edit Vew History Bookmarks Tools Help He Edt vew History Bookmarks loch Help 
@-- ^ E + 2 G- p a8 - ^ 3- #30- p 











AI 18-10 在 页 面 原来 的 背景 颜色 上 ， 文 本 很 难看 清楚 图 18-11 在 白色 背景 上 ， 文 本 清楚 多 了 
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V 提示 

O 注意 ， 这 个 bookmarklet 使 用 了 javascript:void(command); 形 式 。 这 是 因为 bookmarklet 必须 
返回 某 个 值 ， 这 个 值 一 般 用 来 覆盖 当前 页 面 的 内 容 。 通 过 使 用 void() 方 法 ， 就 什么 也 不 返回 ， 
什么 也 不 覆盖 。 

O bookmarklet 使 用 单 引 号 ,而 不 是 双 引 号 ,这 是 因为 在 幕后 每 个 bookmarklet 包含 在 一 个 <a href=""> 
标签 中 。 使 用 双 引 号 会 过 早 地 结束 bookmarklet。 


18.3 ”改变 页 面 样式 


如 果 页 面 的 背景 颜色 是 在 页 面 的 HTML 中 设置 的 , 那么 前 面 的 示例 会 起 作用 。 但 是 , 如 果 页 面 使 
用 样式 表 改 变 背景 颜色 或 者 在 页 面 元 素 上 使 用 背景 图 像 ， 那 么 这 个 bookmarklet 就 无 效 了 。 下 一 个 
bookmarklet ( 见 脚本 18-3 ) 会 更 换 页 面 背 景 颜色 、 文 本 颜色 和 链接 颜色 的 CSS 样式 。 背 景 颜色 改 为 
白色 ,文本 颜色 改 为 黑色 ,链接 是 蓝 色 的 ,已 经 访问 过 的 链接 是 紫色 的 。 在 图 18-12 和 图 18-13 中 可 
以 看 到 这 些 变化 。 
















































































图 18-12 原来 的 页 面 比较 难以 阅读 ， 所 以 我 们 希望 改 ”图 08-13 通过 修改 背景 颜色 和 链接 颜色 , 页 面 比 
变 CSS 样式 , 使 页 面 的 可 读 性 更 好 较 容易 阅读 








脚本 18-3 不 要 误解 箭头 的 意思 ， 它 们 并 不 表示 代码 中 有 换行 ， 而 是 因为 本 书 的 页 面 不 够 宽 。 请 记 
住 ， 实 际 的 bookmarklet 必须 在 一 行 上 。 这 个 bookmarklet 会 改变 页 面 的 样式 ， 使 页 面 的 
可 读 性 更 好 


javascript: (function(){var styles='*{background:#FFF !important;color:#000 !important):link,:link 
»*{color:#00F !important}: visited, :visited *{color:#93C !important}';var newSS-document.create 
*Element('link');newSS.rel-'stylesheet';newSS.hrefz'data:text/css, 'tescape(styles) ;document.getElem 
»entsByTagName(' head" ) [0] .appendChild(newSS);))(); 


如 果 你 觉得 阅读 网 页 中 黑色 背景 上 的 白色 文本 有 困难 , 或 者 不 喜欢 站 点 对 链接 和 一 般 文本 使 用 太 
相似 的 颜色 ， 那 么 这 个 bookmarklet 正好 可 以 帮助 你 。 我 们 经 常 在 自己 的 日 常 Web 浏览 中 使 用 这 个 
bookmarklet。 再 次 提醒 你 ， 这 个 bookmarklet 只 是 改变 页 面 在 你 浏览 器 中 的 外 观 ， 而 不 会 改变 页 面 本 
身 。 实 际 上 ， 如 果 重 新 加 载 页 面 ， 它 会 重新 显示 为 原来 的 难以 阅读 的 样式 。 但 是 ， 通 过 使 用 这 个 
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bookmarklet， 只 需 单 击 一 次 按钮 就 可 以 减轻 视觉 负担 。 
> 改变 页 面 样式 








1. javascript: (function(){ 
这 里 采用 一 种 新 的 形式 : 并 不 使 用 void() 向 浏览 器 返回 null 值 ， 而 是 把 整个 bookmarklet 放 在 一 
个 匿名 函数 中 。 


2. var styles = '* {background:#FFF !important;color:#000 !important}:link,:link *{color: 























*#OOF !important}:visited,:visited *{color:#93C !important]'; 
这 一 行 在 页 面 上 创建 一 个 新 的 变量 styles， 它 设置 我 们 和 希望 为 页 面 添加 的 样式 : 背景 白色 , 文本 
黑色 ， 未 访问 的 链接 蓝 色 ， 已 访问 的 链接 紫色 。!important 使 这 些 规则 覆盖 所 有 其 他 样式 ，* 表 示 这 
些 新 样式 应 用 于 页 面 上 的 所 有 元 素 。 


3. var newSS = document.createElement('link'); 


























newSS.rel = 'stylesheet'; 
这 一 行 在 页 面 上 创建 一 个 新 的 link 元 素 , 然后 将 这 个 元 素 存储 在 新 变量 newSS 中 。 第 二 行为 新 创 
建 的 链接 创建 一 个 新 的 rel 属性 ， 然 后 将 它 的 值 设 置 为 'stylesheet'。 在 这 里 ，rel 属性 告诉 浏览 右 我 们 
要 链接 一 个 样式 表 。 
4. newSS.href = 'data:text/css,' + escape(styles); 
这 一 行为 新 创建 的 link 元 素 添加 一 个 新 的 href 属性 ， 并 将 其 设置 为 我 们 之 前 创建 的 样式 。 
5. document.getElementsByTagName( 'head' ) [O] .appendChild(newSS); 
这 一 行将 新 的 链接 元 素 插 入 网 页 ， 让 新 样式 生效 ,使 页 面 的 可 读 性 更 强 。 
6. DO; 
这 里 结束 上 面 创建 的 匿名 函数 〈} )， 然 后 结束 函数 包装 器 ( ) )， 后面 的 () 只 是 为 了 表示 这 个 函数 
已 经 结束 并 让 浏览 器 马上 运行 它 。 
v 提示 
口 看 起 来 这 里 的 代码 太 复 杂 了 ， 仅 仅 为 了 避免 void() 似 乎 不 值得 。 但 是 ， 这 是 很 有 意义 的 : 
JavaScript 认为 bookmarklet 是 在 当前 页 面 内 运行 的 ; 如 果 采 用 原来 的 方式 , 就 无 法 确保 页 面 本 
身 并 未 使 用 bookmarklet 中 的 变量 。 如 果 把 整个 bookmarklet 放 在 一 个 函数 中 , 变量 就 处 于 函数 
的 范围 内 ( 参见 第 2 章 )， 可 以 避免 变量 冲突 。 
O 正如 在 本 章 开头 提 到 的 ， 一 个 bookmarklet 只 能 有 一 行 代码 。 在 语句 之 间 放 上 分 号 ， 就 能 够 将 
所 有 命令 放 在 一 行 上 。 


18.4 查询 单词 


如 果 使 用 Web 浏览 器 进行 写作 ( 尤其 是 写 邮件 )， 你 会 希望 有 在 大 部 分 数字 处 理 程序 中 可 用 的 字 
典 和 词典 工具 。 通 过 脚本 18-4 和 脚本 18-5， 就 能 够 在 所 有 写作 工作 中 具备 这 种 功能 。 我 们 将 使 用 
bookmarklet 查询 在 线 字 典 或 词典 。 因 为 脚本 非常 相似 , 所 以 我 们 在 同一 节 中 一 起 介绍 它们 。 脚本 18-4 
演示 如 何 进行 字典 查询 ， 脚 本 18-5 演示 如 何 进行 词典 查询 。 
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脚本 18-4 ix^ bookmarklet 执行 字典 查询 


javascript: (function(){var inText=window.getSelection()+'';if(!inText){inText=prompt('Word:','');} 
'if(inText) (window. open( "http://www. answers .com/topic/'+escape(inText)+'#Ameircan_Heritage_ 
‘Dictionary_ds', 'dictWin', 'width=800, height=500, left=75,top=175,s_crollbars=yes');}})(); 


脚本 18-5 ”这 个 bookmarklet 执行 词典 查询 


javascript: (function(){var inText=window.getSelection()+'';if(!inText){inText=prompt('Word:','');} 
'if(inText) {window.open( ‘http://www. answers .com/topic/'+escape(inText)+'#Roget\ 'sThesaurusds' , 
»' thesWin', 'width=800, height=500, left=75, top=175, scrollbars=yes' );}})(); 








> 查询 单词 

1. var inText = window.getSelection() + ''; 

这 一 行 创建 一 个 新 变量 inText ， 并 且 将 它 设置 为 浏览 器 中 选择 的 文本 的 值 。 

注意 ,在 第 一 行 中 ， 最 后 是 两 个 单 引号 ， 而 不 是 一 个 双 引 号 。 这 么 做 是 因为 浏览 器 可 能 会 返回 非 






































字符 串 内 容 ， 从 而 可 以 将 结果 转换 为 字符 串 。 


2. if (LinText){ 
inText = prompt('Word:',''); 
} 
如 果 没 有 选择 任何 文本 ， 则 提示 用 户 输入 要 查询 的 单词 。 
3. if (inText) ( 
用 户 有 了 两 次 机 会 ， 所 以 他 们 应 该 已 经 输入 了 要 查询 的 单词 。 即 使 如 此 ， 我 们 还 是 在 执行 查询 之 


























前 进行 检查 。 


4. window. open('http://www.answers.com/topic/' + escape(inText) + ‘#Ameircan Heritage 
Dictionary ds','dictWin', 'width=800, height=500, left=75, top=175,scrollbars=yes'); 
或 者 
window.open('http://www.answers.com/topic/' + escape(inText) + '#Roget\'s Thesaurus ds',' 
"thesWin', 'width=800, height=500, left=75, top=175,scrollbars=yes'); 
根据 是 要 进行 字典 查询 还 是 词典 查询 ， 选 择 这 两 段 代 码 之 一 ， 如 图 18-14 和 图 18-15 所 示 。 它 们 
































都 打开 一 个 新 窗口 ， 其 中 显示 我 们 请 求 的 信息 。 可 以 通过 改变 window.open() 调 用 的 height 和 width 





属性 














E， 改 变 窗 口 的 尺寸 来 适应 自己 的 屏幕 。 
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图 18-14 触发 字典 bookmarklet 就 会 返回 显示 查询 结果 的 窗口 
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wacky: Detrinon Synonyms from Anzwerzcom - Google Chrome loom 


www.answers.com | 





Roget's Thesaurus: wacky 


Home > Library > Literature & Language > Thesaurus 
also whacky 





n, mad asa ha 







not all there, nutty as a fn ead, off one's rocker, of unsound mind, out of one's mind, sick i 


head, star« raving mad. See 











图 18-15 词典 查询 的 结果 


v 提示 
O 尽管 与 JavaScript 没什么 关系 ， 但 是 有 一 点 很 有 意思 ， 值 得 注意 : 如 果 使 用 运行 OS X 10.4 或 
更 高 版 本 的 Mac HL, 那么 在 Safari 或 许多 其 他 程序 中 ， 可 以 将 鼠标 指针 放 在 一 个 单词 上 , 并 且 
tk Cmd-Ctrl-D， 操 作 系 统 就 会 利用 Dictionary 应 用 程序 弹出 一 个 字典 /词典 窗口 C 见 图 18-16 )。 
这 在 任何 基于 Cocoa 的 程序 中 都 有 效 ， 所 以 如 果 在 Mac 上 使 用 Firefox， 就 没有 这 种 功能 ( 倒 
性 )。 如 果 你 不 知道 “基于 Cocoa 的 程序 ”是 什么 意思 ， 则 不 必 担 心 ， 在 你 所 用 的 程序 中 试 试 



































这 种 功能 就 行 了 。 
I could tell she was flummoxed as her line 
fine i 
he lit P Ty 
th r xe 
plly, bewildered ¢ or ausis fa Jc TELS 
polit and speechless 
seer 
Thesau 

I fumr xv t 
F pa ntormai at age ten, he created intricate math problems 
pn. A that flummoxed his teachers: BAFFLE, perplex, 
pwd | puzzle, bewilder, mystify, bemuse, 
falls 
L ays z aoo — 














Kl 18-16 在 Mac OSX 中 ， 内 置 了 一 个 字典 和 词典 


18.5 BARR 


对 于 设计 人 员 有 帮助 的 一 种 功能 是 ,脱离 页 面 的 布局 ,查看 页 面 上 的 所 有 图 像 。 脚 本 18-6 可 以 探 
察 别人 的 页 面 , 并 且 显 示 页 面 上 的 各 个 图 像 、 图 像 ( 在 现代 浏览 器 中 ) 的 高 度 和 宽度 以 及 它们 的 URL, 


脚本 18-6 ”可 以 用 这 个 脚本 查看 页 面 图 像 表 格 


javascript: (function(){var iWin,i,t="',di=document.images;for(i=0;icdi.length;i++){if(t.indexOf 
»(di[i].src)<0){t+="'<tr><td><img src='+di[i].src+'/></td><td>'+di[i].height+'</td><td>'+di[i]. 
»width+'</td><td>'+di[i].src+'</td></tr>';}}if(t==''){alert('No images!');}else{iWin=window.open 
»('','IW','width=800,height=600, scrollbars=yes') ; iWin.document.body.innerHTML='<table border=1 
'cellpadding-10 cellspacing=0><tr><th>Image</th><th>Height</th><th>Width</th><th>URL</th></tr> "+ 
*t+'</table>';}})(); 
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> 查看 图 像 








1. var iWin,i,t = '',di=document. images; 


这 个 bookmarklet 首先 对 4 


包含 document. images 对 象 )。 


REL 
个 变 


2. for (i=0;i<di.length;i++) { 
现在 循环 遍历 文档 中 的 每 个 图 像 。 
3. if (t.indexOf(di[i].src)«o) { 











在 这 一 步 中 ， 检 查 是 否 已 经 将 





E 








像 放 在 页 面 上 了 。 这 行 代码 防止 一 个 图 像 出 现 一 次 以 上 。 





进行 初始 化 : iwin, i, t ( 它 以 后 将 包含 所 有 输出 ) 和 di CE 


4. t t='<tr><td><img src=' + di[i].src + '/»«/td»«td»' + di[i].height + '«/td»«td»' + di[i].width 
r+'</td><td>' + di[i].src + '</td></tr>';}} 


我 们 需要 的 所 有 信息 都 在 这 里 以 漂亮 








含 高 度 ， 第 三 个 包含 宽度 ， 最 后 一 个 包含 图 像 的 URL. 


5.if (t=="") { 


alert('No images!'); 


) 


当 循环 完成 时 , 检查 是 否 已 经 找到 了 任何 图 像 。 如 果 没 有 找到 任何 图 像 , 那么 显示 一 个 警告 





向 用 户 显 示 “No images!”。 
6. else{ 








iWin = window.open('', 'IW', 'width=800, height=600, scrollbars=yes'); 
如 果 找 到 了 图 像 ， 就 打开 一 个 新 窗口 来 显示 图 像 信息 。 
7. iWin.document.body.innerHTML = '«table border=1 cellpadding=10 cellspacing=0><tr><th>Image 
</th><th>Height</th><thoWidth</th><th>URL</th></tr>'+t+'</table>' ; 
图 像 信 息 以 及 每 列 的 标题 信息 被 写 出 ， 效 果 见 图 18-17. 


这 里 创建 和 显示 新 窗口 。 
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Waith URL 








You 


hip rw ew pixel moimagespreeh pg 








wil buy me sashimi. Now. 





图 18-17 





这 个 脚本 将 图 像 和 信息 显示 在 一 个 吸引 人 的 表格 中 


的 表格 格式 写 出 。 第 一 个 单元 格 包含 图 像 ， 第 二 个 单元 格 包 
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18.6 ©; ISO Latin 字符 


如 果 你 手工 编写 网 页 , 要 记 住 像 4 和 a 这 类 特殊 字符 的 编码 不 容易 。 脚本 18-7 可 以 显示 常用 的 元 
音字 母 变 体 。 


脚本 18-7 不 必 在 书 中 查找 加 重音 的 字符 ， 可 以 让 JavaScript 在 需要 时 生成 列表 


javascript: (function(){var eWin,n,i,j,w,t='<table border=1 cellpadding-20 cellspacing=0>', l-document. 
>createElement('p'),v='aAeEiIoOuUyY',s=new Array('acute' ,'circ','elig','Elig', 'grave','ring', 
slash’, 'tilde','uml');for(i-0;i«v.length; i++){for(j=0;j<s.length; j++) {w=v.charAt(i)+s[j]+';'5 
*lL.innerHTML='&'+w;n=1. innerHTML; if(n.length==1){t+='<tr><td>&'+w+'</td><td>&'+' amp; '+w+'</td> 
><td>&'+' amp;#'+n.charCodeAt(0)+' ;</td></tr>' ; }}}eWin=window.open('','EW', 'scrollbars=yes ,width=300, 
*height='+screen. height) ; eWin.document.body.innerHTML=t+'</table>';})(); 





























> AF 


> 显示 ISO Latin 字符 








1. var eWin,n,i,j,w,t = ‘<table border=1 cellpadding-20 cellspacing=0>', 1 = document.create 
'Element('p'), 

这 个 bookmarklet 首先 对 4 个 变量 进行 初始 化 。 

2.v = 'aMeEiloOuUyY', 

对 字符 串 v 进行 初始 化 ， 其 中 包含 所 有 元 音字 母 。 

3.s = new Array('acute', 'circ', 'elig', 'Elig', 'grave', 'ring', ‘slash’, ‘tilde’, 'uml'); 

这 是 一 个 数组 s， 其 中 包含 所 有 变 音字 符 编 码 。 

4. for (i=0;i<v.length;i++) { 

这 一 行 用 i 循环 遍历 v 字 符 串 中 的 字符 。 

5. for (j=0;j<s.length; j++) { 

这 一 行 用 j 遍历 s 数组 。 

6.w = v.charAt(i) + s[j] + ';'; 

在 这 一 行 中 ， 将 变量 w 设 置 为 元 音字 母 加 上 编码 ， 后 接 分 号 。 

7.l.innerHTML = '8' + w; 

n = l.innerHTML; 

对 于 下 一 个 步 又 ， 我 们 不 需要 实体 的 字符 串 表 示 ， 而 是 需要 实体 本 身 一 一 也 就 是 说 ， 需 要 a 而 不 
是 &atilde;。 可 以 获取 前 一 步 中 设置 的 字符 串 w， 在 前 面 加 上 8& 符 号， 然后 放 在 已 经 创建 的 元 素 1 的 
innerHTML 中 。 这 会 把 实体 的 字符 串 值 转换 为 显示 的 值 。 为 了 使 用 这 个 值 ， 把 变量 n 设置 为 同一 个 innerHTML 
的 内 容 。 

8. if (n.length==1) { 

为 了 获得 所 有 可 能 的 实体 ,我 们 的 元 音 和 变 音字 符 列 表 包 含 一 些 无 效 的 组 合 。 如 果 前 面 的 转换 步 
又 实际 上 没有 转换 我 们 的 字符 串 ， 就 说 明 这 是 无 效 的 组 合 。 例 如 ，8gaelig; 转 换 为 x ，&Aacute; 转 换 为 
A; 但 是 ，&Aelig; 不 是 有 效 的 实体 ( 尽管 它 看 起 来 应 该 转换 为 下 )， 所 以 前 一 步 不 会 转换 它 ， 结 果 仍 
然 是 一 个 7 字符 的 字符 串 。 有 效 的 实体 最 终 会 产生 一 个 1 字符 的 字符 串 ， 并 执行 后 面 的 代码 。 

9.t += '<tr><td>&" +w + '«/td»«td»&' + 'amp;'+ w + '</td><td>&' + 'amp;#' + n.charCodeAt(0) + '; 

^«/td»«/tr»'; 
我 们 已 经 获得 了 一 个 有 效 的 实体 ， 现 在 要 把 它 放 到 表格 中 。 表 格 的 第 一 列 显示 实体 本 身 ， 第 二 列 
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显示 字符 串 表 示 ， 第 三 列 显示 数字 表示 。 最 后 一 个 值 是 通过 在 实体 上 使 用 charCodeAt() 方 法 获得 的 。 

10. eWin = window.open('','EW','scrollbars-yes,width-300,height-z' + screen.height) ; 
eWin.document.body.innerHTML = t + '«/table»'; 

完成 之 后 ， 打 开 一 个 新 窗口 ， 然 后 把 表格 写 到 窗口 中 ， 见 图 18-18. 

































































eoo Untitled 
about:blank 
4 &aacute; &#225; 
â &acirc; &#226; 
æ &aelig; &#230; 
a &agrave; &#224; 
à &aring; &#229; 
a &atilde; &#227; 
ii &auml; & #228; 
A & Aacute; &#193; 
A &Acirc; &#194; 
Æ &AElig; &#198; 
À &Agrave; &#192; 





























图 18-18 ”这 个 脚本 的 结果 是 一 个 以 HTML. 实体 形式 显示 元 音 的 所 有 变 体 的 新 窗口 
d dd 
个 示例 的 表格 很 长 , 所 以 在 处 理 打 开 窗 口 的 高 度 时 ,使 用 了 一 个 小 技巧 。 并 不 为 窗口 指定 固 
"EE 而 是 根据 用 户 的 显示 器 高 度 设置 窗口 高 度 。 如 果 你 不 希望 这 样 ， 可 以 把 它 设置 为 固 
定 的 大 小 。 
O Æ ff] HTML 实体 是 8AE1ig; 一 一 也 就 是 说 ， 需 要 大 写 的 卫 ， 而 不 是 小 写 的 e。 现 在 你 可 以 体会 
到 这 样 的 bookmarklet 是 多 么 方便 了 。 


18.7 将 RGB 值 转换 为 十 六 进 制 


另 一 个 对 于 Web 开发 人 员 有 帮助 的 小 工具 是 RGB 到 十 六 进 制 的 转换 器 。 当 需要 将 来 自 图 形 程序 
(比如 Adobe Photoshop 或 者 Fireworks ) 的 颜色 值 转换 为 浏览 器 颜色 值 时 ， 以 用 作 页 面 背 景 或 文本 的 
颜色 , 这 会 非常 有 用 。 脚 本 18-8 演示 如 何 用 JavaScript 编写 转换 计算 右 并 且 将 代码 转换 为 bookmarklet。 
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脚本 18-8 ”这 个 脚本 接受 RGB 颜色 值 ， 并 且 将 它们 转换 为 等 同 的 十 六 进 制 值 
javascript: (function(){var s,i,n,h='"#',x='0123456789ABCDEF' ,c=prompt('R,G,B:','');if(c){s=c.split 
»(','); for(i=0;i<3;i++){n=parseInt(s[i]);ht=x.charAt(n>>4)+x.charAt(n&15) ; prompt (' Hexcolor:',h); 


> 将 RGB 值 转换 为 十 六 进 制 


1. var s,i,n,h = '#', 
3X bookmarklet 首先 对 4 个 变量 进行 初始 化 。 

2. x = '0123456789ABCDEF ' , 

变量 x 被 设置 为 有 效 的 十 六 进 制 值 。 

3. c = prompt('R,G,B:',''); 

这 一 行 提示 用 户 输入 所 需 的 RGB 值 ( 以 逗号 分 隔 )， 如 图 18-19 所 示 。 


























dropboxusercontent.com needs some information == 
RGB Cancel 
| 100. 150, 200 

















图 18-19 ”这 个 脚本 的 第 一 部 分 提示 用 户 输入 RGB fH 











4. if (c) { 

如 果 用 户 输入 了 任何 内 容 ， 就 继续 执行 代码 。 否 则 ，c 的 值 就 是 null, bookmarklet 跳 过 后 面 所 有 
的 步 又。 

5. s = c.split(','); 

Hir c 中 的 内 容 ， 并且 将 结果 放 进 s 数组 中 。 

6. for (i=0;i<3;i++){ 

对 于 红色 、 绿 色 和 蓝 色 值 ， 循 环 执行 以 下 代码 。 

7. n = parseInt(s[i]); 

将 s 的 当前 元 素 转换 为 数字 ， 并 且 将 它 保存 为 n。 

8. h += x.charAt(n»»4) + x.charAt(n815); 

这 一 行将 n 转换 为 两 个 十 六 进 制 数字 ， 并 且 将 结果 添加 到 h 中 。 

9. prompt('Hexcolor:',h); 

通过 提示 命令 显示 结果 ( 准备 将 它 复制 进 HTML 页 面 )， 如 图 18-20 所 示 。 采 用 这 种 做 法 而 不 是 
用 和 警告 对 话 框 ， 这 样 就 可 以 以 后 复制 并 且 粘 贴 代 码 。 












































dropboxusercontent.com needs some information = 
sera: 
Hexcolor: 
Cancel 
[E6496c8 














图 18-20” 男 一 个 提示 框 提供 了 计算 出 的 十 六 进 制 值 
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18.8 ”对 值 进行 转换 

值 可 以 从 一 种 类 型 转换 成 其 他 各 种 可 能 的 类 型 。 脚本 18-9 仅仅 演示 一 个 示例 : 如 何 将 公里 数 转换 
为 英里 数 。 
脚本 18-9 可 以 创建 bookmarklet 来 执行 几乎 任何 类 型 的 单位 转换 。 这 个 脚本 将 公里 数 转换 为 英里 数 


javascript: (function(){var t,expr-prompt('Length in kilometers:','');if(isNaN(parseFloat(expr))) 
{t=expr+' is not a number’; }else{t='Length in miles is '4Math.round(expr*6214)/10000; }alert(t);})(); 


p^ 将 公里 数 转换 为 英里 数 




















1. var t,expr = prompt('Length in kilometers:',''); 
i bookmarklet 首先 提示 用 户 输入 以 公里 为 单位 的 长 度 ( 见 图 18-21 )。 
2. if (isNaN(parseFloat(expr))) { 
检查 用 户 是 否 输入 了 数字 值 。 
3. t = expr + ' is not a number’; 
如 果 没 有 输入 数字 值 ， 则 弹出 错误 消息 。 
4. else{ 
t = 'Length in miles is' + Math. round(expr*6214)/10000; 

} 
否则 ， 将 值 转换 为 英里 数 并 且 将 它 存储 在 不 中 。 
5. alert(t); 
无 论 输 入 值 如 何 ， 我 们 将 转换 结果 存储 在 t 中 ， 结 果 显 示 如 图 18-22 所 示 。 


http:/ /di.dropboxusercontent.com 
http://dl.dropboxusercontent.com 
Length in miles is 62.14 


Cancel | OK | | OK | 













































































Length in kilometers: 
































图 18-21 首先 ， 要求 用 户 输入 要 转换 的 数字 图 18-22 JavaScript 返回 转换 结果 
v 提示 
口 改写 这 个 脚本 来 执行 所 需 的 任何 转换 都 是 很 简明 的 。 只 需 改 变 步骤 1 中 的 标签 ， 并 量 将 步骤 4 
中 的 数学 表达 式 蔡 换 为 所 需 的 转换 的 适当 表达 式 。 

口 可 以 建立 一 批 执 行 不 同 转换 的 bookmarklet， 将 它们 组 织 在 Bookmarks 或 Favorites 菜单 中 的 文 
件 夹 中 。 然 后 就 可 以 通过 鼠标 单 击 进行 转换 。 





























18.9 bookmarklet 计算 器 





如 果 你 考虑 一 下 ,会 觉得 只 用 一 长 行 代 码 建立 一 个 完全 成 熟 的 计算 器 是 非常 困难 的 。 但 是 ， 可 以 
使 用 脚本 18-10 这 样 的 bookmarklet， 利 用 JavaScript 内 置 的 Math 函数 来 执行 相当 复杂 的 计算 。 
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脚本 18-10 “可 以 用 这 个 bookmarklet 进行 相当 复杂 的 计算 


javascript: (function(){var evl,expr-prompt('Formula...(eg: 2*3 + 7/8)','');with(Math)try{evl=parseFloat 
'(eval(expr));if(isNaN(evl))(throw Error('Not a number!');)prompt('Result of '+expr+':',evl);} 
»catch(ev1)(alert(ev1);))) O; 


fr 口 口 





=> 使 用 JavaScript 计算 器 








1. var evl,expr = prompt('Formula...(eg: 2*3 + 7/8)',''); 

这 一 行 设置 了 一 个 变量 ev1， 然 后 提示 用 户 输入 一 个 表达 式 或 公式 〈 如 图 18-23 所 示 ), 将 它 存储 
在 expr 中 。 

2. with(Math) try { 

下 面 几 行 需要 使 用 JavaScript 内 置 的 Math 例 程 进行 运算 。with(Math) 这 一 行 告诉 解释 器 ， 当 看 到 
这 些 函 数 时 ， 应 该 将 它们 作为 Math 命令 对 待 。 

try{} 警 告 JavaScript， 我 们 将 要 做 的 事情 可 能 会 失败 ， 如 果 出 现 问 题 ， 不 要 惊慌 。 实 际 上 ， 如 果 
KAHA, JavaScript 甚至 不 必 弹 出 错误 消息 ， 因 为 我 们 要 自己 处 理 错 误 。 

3. evl = parseFloat(eval(expr)); 

计算 表达 式 ， 将 结果 转换 为 浮 点 数 ， 然 后 存储 在 evl 中 。 

4. if (isNaN(evl)) { 

如 果 evl 中 的 值 不 是 数字 (NaN )， 那 么 执行 下 一 行 。 

5. throw Error('Not a number!'); 

如 果 执 行 到 这 里 ， 就 说 明 由 于 某 种 原因 ， 用 户 输入 的 内 容 无 法 计算 出 数字 。 当 发 生 这 种 情况 时 ， 
我 们 希望 显示 错误 消息 “Not a number!”。 这 里 设置 这 个 消息 ， 它 将 在 步骤 7 中 显示 。 

6. prompt('Result of ' + expr + ':', evl); 

和 否则， 表达 式 就 是 有 效 的 ， 因 此 显示 计算 结果 ， 如 图 18-24 所 示 。 















































http: //di.dropboxusercontent.com http://di.dropboxusercontent.com 
Formula...(eg: 2*3 + 7/8) Result of sqrt(42): 
6.48074069840786 
Cancel | OK | Cancel | OK | 
划一 V ZELA > s N Y 
18-23 ”提示 用 户 必 须 输入 一 个 公式 图 18-24 JavaScript 返回 计算 结果 








7. catch(evl) { 
alert(ev1); 
) 

这 里 是 步骤 2 开始 的 try{} 块 的 末尾 。 如 果 到 达 这 里 ， 就 是 发 生 了 两 种 情况 之 一 : 要 么 是 在 步 又 
5 中 遇 到 了 错误 ， 或 者 是 发 生 了 其 他 错误 。 无 论 是 哪 种 情况 ,我 们 都 “捕获 抛 出 的 错误 ”， 并 且 将 它 放 
在 屏幕 上 的 警告 框 中 。 
V 提示 
O 还 记得 try/throw/catch 语法 的 意义 吗 ? 我们 在 2.11 节 中 最 先 讨论 过 这 些 语法 。 
O 如 果 你 想 知 道 可 以 使 用 哪些 Math 函数 ， 回 头 看 看 第 3 E, 我 们 在 3.1 节 介 绍 了 Math 对 象 及 其 方法 。 
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18.10 ”缩短 URL 


由 于 许多 原因 , 我 们 可 能 希望 获得 更 短 的 URL 版 本 , 比如 你 可 能 正在 使 用 与 Twitter 相似 的 服务 ， 
它 对 字符 数量 有 限制 ， 或 者 要 把 结果 粘贴 到 电子 邮件 中 而 且 不 希望 它 换行 。 无 论 出 于 什么 原因 ， 脚 本 
18-11 都 可 以 提供 更 简单 的 URL. 


脚本 18-11 只 需 单 击 一 次 鼠标 ( 和 这 个 脚本 )， 就 可 以 缩短 这 些 URL 


javascript: (function(){window.open('http://tinyurl.com/create.php?url='+location.href,'', 'width=750, 
*height=500, scrollbars=yes');})(); 









































图 18-25 许多 地 方 需要 短 URL 版 本 ， 这 个 bookmarklet 可 以 很 方便 地 提供 短 URL 


=> 缩短 URL 


O window.open('http://tinyurl.com/create.php?url-' + location.href,'', 'width=750, 








*height=500, scrollbars-yes'); 

这 里 打开 一 个 新 窗口 并 使 用 TinyURL.com 服务 设置 短 URL。 我 们 向 这 个 服务 传递 当前 页 面 位 置 
(location.href )， 这 就 是 它 需 要 的 所 有 信息 。TinyURL.com 会 立即 把 缩短 的 URL 放 到 你 的 剪贴 板 中 ， 
所 以 只 需 访 问 正确 的 网 页 ， 单 击 这 个 bookmarklet， 看 看 打开 的 页 面 是 否 一 切 正 常 (OLA 18-25), X 
闭 它 ， 然 后 把 新 的 URL 粘贴 到 所 需 的 任何 地 方 。 

v 提示 
a 网 上 有 许多 不 同 的 URL 缩短 服务 .如 果 你 不 喜欢 TinyURL.com, 可 以 试 试 bit.ly、goo.gl 或 is.gd。 
O 如 果 你 也 在 Twitter 上 ， 请 和 我 们 打 个 招呼 ， 我 们 的 用 户 名 是 @negrino 和 @dori。 


18.11 检验 页 面 


在 创建 页 面 时 , 最 好 确保 页 面 符 合 Web 标准。 这 样 的 页 面 在 现代 浏览 器 中 装载 得 更 快 ， 而 且 更 容 
易 维 护 。 对 页 面 进 行 代 码 有 效 性 检查 的 最 容易 的 方法 是 ， 通 过 W3C 维护 的 页 面 检验 器 
(Chttp:/validator.w3.org ) 运行 它 。 脚 本 18-12 所 示 的 bookmarklet， 检 查 当 前 在 浏览 器 中 显示 的 页 面 的 
有 效 性 。 实 现 方法 是 ， 获 得 当前 页 面 的 URL, 将 它 传递 给 检验 器 ， 然 后 打开 一 个 显示 检验 需 结 果 的 新 
窗口 ， 如 图 18-26 所 示 。 
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脚本 18-12 ”使 用 这 个 脚本 确保 页 面包 含 符合 Web 标准 的 有 效 的 标记 


javascript: (function(){window. open('http://validator.w3.org/check?uri='+location.href,'', 
> 'width=800, height=900, resizable=yes, scrollbars=yes');})(); 











Dori /mith 

















图 18-26 通过 W3C 检验 需 运 行 你 的 页 面 ， 如 果 页 面 编 写 得 正确 ， 就 会 返回 让 人 满意 的 结果 
=> 检验 页 面 


口 window.open( ‘http: //validator.w3.org/check?uri=' + location.href,'', 'width=800, height=900, 
"resizable-yes,scrollbars-yes'); 

这 个 bookmarklet 很 用， 而 且 并 不 复杂 。 首 先 ， 打开 一 个 窗口 ， 并且 将 检验 器 的 URL 传递 给 这 个 

窗口 。 你 会 注意 到 ， 检验 器 有 一 个 参数 uri， 它 接受 当前 页 面 的 URL, BH location.href。 两 者 之 间 的 

加 号 将 位 置 对 象 与 检验 器 的 URL. 拼接 起 来 。 这 一 行 的 其 余部 分 仅仅 是 窗口 大 小 和 其 他 属性 的 一 些 参 数 。 


18.12 ”通过 电子 邮件 发 送 页 面 
在 网 上 冲浪 时 ， 有 时候 会 发 现 一 个 页 面 非常 有 用 ,需要 与 同事 分 享 ， 或 者 很 有 趣 ， 希望 与 好 朋友 


分 享 。 这 个 bookmarklet ( 见 脚本 18-13 ) 获取 用 户 当 前 所 处 的 页 面 ， 加 上 突出 显示 的 文本 ,使 用 这 些 
内 容 创 建 一 个 新 的 电子 邮件 。 





















































脚本 18-13 ”如 果 和 希望 通过 电子 邮件 把 一 个 网 页 的 所 有 内 容 或 一 部 分 内 容 发 送 给 别人 ， 使 用 这 个 
bookmarklet 是 最 简单 的 方法 


javascript: (function(){location.href='mailto: ?SUBJECT='+document.title+' &BODY='+escape(location.href)+ 
>! \r'+window.getSelection();})(); 


> 通过 电子 邮件 发 送 网 页 

口 location.href = 'mailto:?SUBJECT-' + document.title + '8BODY-' + escape(location.href) + 
»"\x' + window. getSelection(); 

如 果 你 以 前 在 网 页 上 添加 过 mailto 链接 ， 就 应 该 认识 这 种 语法 。 这 行 代 码 的 作用 相当 于 单 击 <a 


href='mailto:'></a> 链 接 。 电 子 邮 件 的 主题 设置 为 当前 文档 的 标题 ， 邮 件 体 设置 为 页 面 的 URL 和 当 
前 选择 的 文本 ， 见 图 18-27. 
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图 18-27 只 需 一 次 单 击 就 会 打开 一 个 新 窗口 ， 其 中 已 经 设置 了 邮件 的 基本 元 素 














V 提示 
口 对 于 这 个 bookmarklet， 不 必 非 使 用 Gmail 或 Web mail。 只 要 计算 机 上 设置 了 默认 的 邮件 客户 


端 ， 它 就 会 打开 并 创建 邮件 。 


18.13 ”改变 页 面 大 小 
在 开发 网 站 时 , 能 够 看 看 页 面 在 更 小 的 显示 屏幕 上 的 效果 很 用。 这 个 bookmarklet ( 见 脚 本 18-14 ) 
把 浏览 器 窗口 修改 为 640x480。 
脚本 18-14 ”如 果 希 望 看 看 页 面 在 采用 男 一 种 大 小 时 效果 如 何 ， 使 用 这 样 的 bookmarklet 会 很 方便 
javascript: (function(){resizeTo(640, 480) ;moveTo(0,0);})(); 
> 改 变 页 面 大 小 
口 resizeTo(640, 480) ;moveTo(0,0); 


第 一 个 命令 resizeTo() 修 改 浏 览 器 窗口 的 尺寸 。 下 一 个 命令 moveTo() 告 诉 浏 览 器 左上 角 位 于 何 处 


ary 


( 见 图 18-28 )。 
































3 ested Stes > È) Unicode Symbols 上 Nem Politics = Ji Blog Soff ~ 
A 
Your source f 
scripts, in 
Arcs —— Loan JavaScripi P davaScii CSS t 
RESOURCES Welcome to JavaScript World 
FAQ 
About Authors note: - 
Where to Learn More Hello, and thanks for visiting y 


JavaScript World, where you'll find 
nany resources that will yc JavaScript S 


an you 
Tih Edition learn and master JavaScript. We're 
< > 




















图 18-28 一 眼 就 可 以 看 出 这 个 站 点 的 小 屏幕 版 本 显示 不 了 大 量 内 容 
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v 提示 

O 这 个 bookmarklet 本 身 用 处 不 大 。 但 是 ， 可 以 创建 一 系列 与 它 几乎 完全 相同 的 bookmarklet, 分 
别针 对 你 希望 检查 的 所 有 窗口 大 小 。 显 然 ， 针 对 任何 窗口 大 小 修改 这 个 bookmarklet 都 是 非常 
简单 的 。 

口 以 相同 大 小 并 列 显示 多 个 窗口 也 是 有 用 的 〈 如 果 显 示 屏 幕 足够 大 )。 例 如 ， 可 以 通过 一 个 
bookmarklet 把 窗口 宽度 设置 为 700 像素 ， 高 度 设置 为 显示 屏幕 的 最 大 高 度 : 


resizeTo(700,screen.availHeight) ; 
moveTo(0,0); 


再 创建 另 一 个 bookmarklet: 


resizeTo(700,screen.availHeight) ; 
moveTo(screen.availWidth-700,0); 


后 者 也 把 屏幕 宽度 设置 为 700 像素 , 高 度 设置 为 显示 屏幕 的 最 大 高 度 , 但 是 把 窗口 定位 在 
屏幕 的 右边 而 不 是 左边 。 如 果 显 示 屏 幕 是 1400 像素 宽 或 更 宽 ， 就 会 看 到 它们 并 排 显 示 ， 
没有 重合。 

口 如 果 你 设置 的 bookmarklet 不 起 作用 ， 检 查 一 下 你 调整 的 窗口 是 否 只 打开 了 一 个 标签 页 。 
















































































LEIS 
JavaScript 的 版 本 演化 和 


参考 资料 








从 作为 Netscape Navigator 2.0 的 一 部 分 出 现 以 来 , JavaScript 经 过 了 20 来 年 的 演化 。 这 个 附 
录 简 要 地 讨论 了 JavaScript 的 不 同 版 本 ， 以 及 各 种 浏览 器 所 包含 的 JavaScript 版 本 。 
这 里 还 提供 了 一 个 JavaScript 对 象 关 系 图 以 及 一 个 对 象 表 ,其 中 列 出 了 大 多 数 JavaScript 软件 对 象 ， 
以 及 它们 的 属性 、 方 法 和 事件 处 理 程序 ， 并 且 包 括 ECMAScript 3。 





























A.1 JavaScript 版 本 


JavaScript 有 几 个 不 同 的 名 称 (具体 视 你 所 用 的 产品 而 定 )， 而 且 有 十 几 个 不 同 的 版 本 。 除 了 
JavaScript 之 外 ， 还 有 JScript 和 ECMAScript。 下 面 分 别 介绍 各 个 版 本 。 























A.1.1 Netscape 的 JavaScript 





JavaScript 的 第 一 个 版 本 最 初 称 为 LiveScript， 它 是 在 Netscape Navigator 2.0 中 首次 发 布 的 。 
Netscape 7528 LiveScript 成 为 一 种 扩展 浏览 器 功能 的 方式 ， 并 且 让 Web 设计 人 员 能 够 给 他 们 的 站 点 增 
加 交互 性 。Navigator 2.0 中 的 JavaScript 版 本 是 JavaScript 1.0. 

Navigator 3.0 中 提供 了 JavaScript 1.1， 其 中 增加 了 对 图 像 、 数 组 、Java applet 和 插件 的 支持 ， 还 
做 了 许多 其 他 修改 。 

随 着 Navigator 4.0 (也 称 为 Netscape Communicator ) 的 发 布 ，JavaScript 1.2 出 现 了 ， 它 做 了 更 多 
的 改进 和 调整 。Netscape 4.5 随后 提供 了 JavaScript 1.3. JavaScript 1.4 是 纯 服 务 器 端 语言 ， 而 Netscape 
6 引入 了 JavaScript 1.5。 

JavaScript 的 当前 版 本 是 由 开源 的 Mozilla 项 目 开 发 的 , 主要 考虑 的 是 它 的 Firefox X wto Firefox 
较 新 的 版 本 支持 ECMA-Script-262 Edition 5 ( 见 下 面 的 讨论 )。 

到 编写 本 书 时 ，JavaScript 的 当前 版 本 是 1.8.6， 随 Firefox 17 一 起 发 布 ( 见 表 A-1 )。 
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JavaScript 版 本 


JavaScript 版 本 





Netscape 2 
Netscape 3 
Netscape 4.0~4.05 
Netscape 4.06~4.7 


Netscape 6.0, Netscape 7.0、Mozilla、Firefox 1.0~1.41 


Firefox 1.5 
Firefox 2 
Firefox 3 
Firefox 4 


Firefox 17+ 


A.1.2 ”微软 的 JScript 
微软 按照 自己 的 方式 实现 JavaScript， 这 个 版 本 并 不 总 是 与 Netscape 版 本 兼 














££, JavaScript 的 微软 


版 本 称 为 JScript 1， 它 或 多 或 少 与 JavaScript 1.0 兼容 ,但 是 有 一 些 差异 。 很 自然 ，JScript 只 出 现在 


Windows 和 微软 的 IE (MSIE ) 版 本 中 。 


在 Windows E, 还 有 用 于 Windows 95/NT AY JScript 2 ( 多 少 可 与 JavaScript 1.1 比较 ), MSIE 3.02 





年 停止 了 支持 。 





早 就 应 该 升级 了 。 











的 升级 版 本 和 以 后 的 版 本 支持 JScript 2。 并 非 MSIE 3.02 的 所 有 版 本 都 支持 JScript 2.0。 要 想 查 明 已 经 
安装 的 JScript 是 哪个 版 本 ， 可 以 在 硬盘 上 搜索 jscript.dll。 查 看 这 个 文件 的 
项 卡 。 如 果 文 件 版 本 不 是 至 少 以 2 开头 的 ， 那 么 浏览 
在 Macintosh E, MSIE 3.0 没有 JScript， 但 是 3.01 中 有 。 它 包含 JScript 1.0， 但 是 与 Windows 上 
的 版 本 不 同 。 在 JScript 的 Mac 和 Windows 版 本 之 间 有 一 些 差异 (例如 ，Mac 版 本 支持 Image 对 象 上 
的 鼠标 翻转 器 ， 而 Windows JScript 1.0 不 支持 )。 在 2003 年 ， 微 软 放弃 了 Mac W MSIE, Jf 


BIE, JF EL HE Version 选 








于 2005 











觉得 乱 吗 ? 别 忙 , 还 有 呢 : JScript 3.0 大 致 相当 于 JavaScript 1.2, JScript 5.x 大 致 相当 于 JavaScript 


1.5, 根据 IE 的 版 本 和 所 运行 的 Windows， 表 A-2 有 助 于 你 了 解 JScript 的 版 本 。 
表 A-2 JScript 版 本 





浏 览 器 JavaScript 版 本 
MSIE 4 3.0 
MSIE 5 5.0 
MSIE 5.5 5.5 
MSIE 6 5.6 
MSIE 7 2. 
MSIE 8 5.8 
MSIE 9+ 9.0 
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A.2 ECMAScript 


在 1996 ^E, Web FEARI, Netscape 沿 着 一 个 方向 发 展 JavaScript， 而 微软 沿 着 一 个 在 一 定 




















程度 上 兼容 但 有 差异 的 方向 发 


理 JavaScript 的 不 同 “方言 ”， 


























展 JScript。 没 有 人 喜欢 这 种 分 裂 局 面 ，Web 开发 人 员 不 得 不 在 页 面 中 处 
否则 他 们 的 代码 就 只 能 在 一 种 浏览 器 中 工作 。 开 发 人 员 和 希望 有 个 标准 。 





所 以 Netscape 加 入 了 一 个 国际 标准 组 织 ECMA， 并 且 向 它 提交 了 JavaScript 语言 规范 ， 微 软 也 拿 出 了 





自己 的 意见 和 建议 , ECMA 开始 制定 JavaScript 标准 , 并 且 于 1997 年 6 月 形成 了 ECMA-262 标准 (也 
称 为 ECMAScript, 这 个 术语 一 般 只 在 闲谈 中 使 用 ), 这 个 标准 与 JavaScript 1.1 非常 相似 , 但 不 完全 一 样 ， 
































后 续 版 本 纠正 了 这 个 问题 。 如 与 

















你 想 阅读 正式 的 ECMAScript 规范 ， 可 以 从 www.ecma-international.org/ 











下 载 。 找 到 Standards 链接 ， 然 后 通过 它 找到 ECMA-262 规范 。 





自从 1997 年 以 来 ， ECMAScript 经 历 了 几 种 版 本 : 最 重要 的 是 , 第 3 版 在 1999 年 12 月 发 布 , 第 

















5 版 在 2009 年 12 月 发 布 ，5.1 版 在 2011 年 6 月 发 布 。 第 4 版 一 直 没 有 发 布 ， 最 终 取 消 了 。 现 在 的 浏 
览 器 支持 第 3 版 (45 JavaScript 1.5 相当 )， 并 且慢 慢 兼 容 第 5 版 。 一 定 要 注意 的 是 ，ECMAScript 
现在 控制 着 JavaScript 标 准 的 发 展 方向 ,当前 所 有 浏览 器 厂商 都 让 自己 的 JavaScript 实 现 与 ECMAScript 





兼容 。 
































所 以 , 只 要 你 编写 的 代码 符合 ECMAScript 标准 , 它 就 应 该 能 够 在 MSIE 4 fll Netscape Navigator 6 








中 正常 运行 。 但 是 ， 仍 然 应 该 在 不 同 的 浏览 器 、 平 台 和 版 本 中 测试 你 的 代码 。 
基于 WebKit 的 苹果 Safari 和 基于 Blink 的 谷歌 Chrome 一 直 支 持 ECMAScript. 


A3 HRR 











JavaScript 书 都 应 该 提供 JavaScript WAR, 包括 它们 的 属性 、 方 法 和 事件 处 理 程序 ( 这 些 术语 的 
定义 见 第 1 章 )。 表 A- 3 列 出 了 大 多 数 JavaScript 对 象 并 且 包 括 ECMAScript 3。 我 们 省 略 了 几 个 很 不 
版 本 中 的 一 些 老式 对 象 ， 这 些 对 象 已 经 被 新 对 象 或 扩展 对 象 取代 了 。 





常用 的 对 象 ， 以 及 较 














表 A-3 JavaScript 对 象 表 





对 RK 属 性 h X 事件 处 理 程序 
Anchor name 无 无 
anchors 数 组 length 无 无 
Applet align applet 方 法 onblur 
code blur onclick 
codeBase focus ondblclick 
height onfocus 
hspace onkeydown 
name onkeypress 
vspace onkeyup 
width onmousedown 
onmousemove 
onmouseout 


onmouseover 
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( 续 ) 
对 RE 属 性 AO 事件 处 理 程序 
onmouseup 
onresize 
applets 数 组 length 无 无 
Area alt 无 onblur 
cords onclick 
hash ondblclick 
host onfocus 
hostname onkeydown 
href Onkeypress 
noHref onkeyup 
pathname onmousedown 
port onmousemove 
protocol onmouseout 
search onmouseover 
shape onmouseup 
target onresiz 
Array length concat 无 
join 
reverse 
slice 
sort 
splice 
toLocaleString 
toString 
Body alink 无 onblur 
Background onclick 
bgColor ondblclick 
link onfocus 
text onkeydown 
vlink onkeypress 
onkeyup 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onresize 
Button form blur onblur 
name click onchange 
type focus onclick 


value ondblclick 
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E 
对 R 属 性 A X 事件 处 理 程序 
onfocus 
onkeydown 
onkeypress 
onkeyup 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
Checkbox checked blur onblur 
defaultChecked click onchange 
form focus onclick 
name ondblclick 
type onfocus 
value onkeydown 
onkeypress 
onkeyup 
onmouseddown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
Date 无 getDate 无 
getDay 
getFullYear 
getHours 
getMilliseconds 
getMinutes 
getMonth 
getSeconds 
getTime 
getTimezoneOffset 
getUTCDate 
getUTCDay 


getUTCFullYear 
getUTCHours 


getUTCMilliseconds 


getUTCMinutes 
getUTCMonth 
getUTCSeconds 





getYear 
parse 
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(5E) 
对 m 性 h X 事件 处 理 程序 

setDate 

setFullYear 

setHours 

setMilliseconds 

setMinutes 

setMonth 

setSeconds 

setTime 

setUTCDate 

setUTCFullYear 

setUTCHours 

setUTCMilliseconds 

setUTCMinutes 

setUTCMonth 

setUTCSeconds 

setYear 

toGMTString 

toLocaleDateString 

toLocaleString 

toLocaleTimeString 

toString 

toUTCString 

UTC 

valueOf 

document alinkColor clear onblur 

Anchor close onclick 
anchors createElement ondblclick 
Applet createTextNode onfocus 
applets focus onkeydown 
Area getElementById onkeypress 
attributes getElementsByName onkeyup 
bgColor getElementsByTagName onmousedown 
Body Open onmousemove 
childNodes Write onmouseout 
cookie writeIn onmouseover 
documentElement onmouseup 
domain onresize 
embed 
embeds 
fgColor 
firsrChild 


Form 
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( 续 
对 属 性 A X 事件 处 理 程序 
forms 
lmage 
images 
lastChild 
lastModified 
linkColor 
Link 
links 
location 
namespaceURT 
nextSibling 
nodeName 
nodeType 
parentNode 
plugins 
previousSibling 
referrer 
Script 
StyleSheet 
styleSheets 
title 
URL 
vlinkColor 
FileUpload form blur onblur 
name focus onclick 
type select ondblclick 
value onfocus 
onkeydown 
onkeypress 
onkeyup 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onselect 
Form action reset onclick 
Button submit ondblclick 
Checkbox onkeydown 
elements onkeypress 
encoding onkeyup 
encType onmousedown 
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( 续 ) 
对 属 性 AO 事件 处 理 程序 

FileUpload onmousemove 
Hidden onmouseout 
length onmouseover 
method onmouseup 
name onreset 
Password onsubmit 
Radio 
Reset 
Select 
Submit 
target 
Text 
Textarea 

forms array length 无 无 

hidden form 无 无 
maxLength 
name 
readOnly 
size 
type 
value 

History length back 无 

forward 
go 

history 数 组 length 无 无 

Image align 无 onabort 
alt onblur 
border onclick 
complete ondblclick 
height onerror 
href onkeydown 
hspace onkeypress 
isMap onkeyup 
lowsrc onload 
name onmousedown 
Src onmousemove 
useMap onmouseout 
vspace onmouseover 
width onmouseup 
x onreset 
y onresize 


onsubmit 
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( 续 
对 R 5 X 事件 处 理 程序 
images 数 组 length 无 无 
Link hash 无 onblur 
host onclick 
hostname ondblclick 
href onkeydown 
name onkeypress 
pathname onkeyup 
port onmousedown 
protocol onmousemove 
rel onmouseout 
rev onmouseover 
search onmouseup 
target 
links 数 组 length 无 无 
location hash assign 无 
host reload 
hostname replace 
href 
pathname 
port 
protocol 
search 
Math E abs 无 
LN2 acos 
LN10 asin 
LOG2E atan 
LOG10E atan2 
PI ceil 
SORT1 2 cos 
SORT2 exp 
floor 
log 
max 
min 
pow 
random 
round 
sin 
sqrt 


tan 
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(5) 
对 属 性 "ERE, 事件 处 理 程序 
MimeType description 无 无 
enabledPlugin 
suffixes 
type 
mimeTypes 数 组 length 无 无 
navigator appCodeName javaEnabled 无 
appName taintEnabled 
appVersion 
cookieEnabled 
MimeType 
mimeTypes 
platform 
Plugin 
plugins 
userAgent 
Number MAX_VALUE toExponential 无 
MIN_VALUE toFixed 
NaN toLocaleString 
NEGATIVE_INFINITY toPrecision 
POSITIVE_INFINITY toString 
valueOf 
Object attributes appendChild onblur 
childNodes blur onchange 
children click onclick 
className cloneNode oncontextmenu 
clientHeight focus ondblclick 
clientLeft getAttribute onfocus 
clientTop getAttributeNode onkeydown 
clientWidth getElementsByTagName onkeypress 
dir getExpression onkeyup 
firstChild hasChildNodes onmousedown 
id insertBefore onmousemove 
innerHTML item onmouseout 
lang releaseCapture onmouseover 
language removeAttribute onmouseup 
lastChild removeAttributeNode onreadystatechange 
length removeChild onresize 
localName replaceChild onscroll 
namespaceURI scrollIntoView 
nextSibling setAttribute 


nodeName 
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对 


象 属 性 


事件 处 理 程 


| vs 





Option 


Options 42H, 


Password 


nodeType 
nodeValue 
offsetHeight 
offsetLeft 
offsetParent 
offsetTop 
offsetWidth 
ownerDocument 
parentNode 
prefix 
previousSibling 
readyState 
scrollHeight 
scrollLeft 
scrollTop 
scrollWidth 
sourceIndex 
style 
tabIndex 
tagName 
title 
defaultSelected 
form 

index 
selected 
text 

value 

length 
defaultValue 
form 
maxLength 
name 
readOnly 
size 

type 

value 


remove 


无 
blur 
focus 
select 


无 

onblur 
onchange 
onclick 
ondblclick 
onfocus 
onkeydown 
onkeypress 
onkeyup 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onselect 
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( 续 ) 
对 属 性 5 ”法 事件 处 理 程序 
Plugin description refresh 无 
filename 
length 
name 
plugins 数 组 length 无 无 
Radio checked blur onblur 
defaultChecked click onchange 
form focus onclick 
name ondblclick 
type onfocus 
value onkeydown 
onkeypress 
onkeyup 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
radio 数 组 length 无 无 
RegExp constructor compile 无 
global exec 
ignoreCase test 
input toSource 
lastIndex toString 
lastMatch valueOf 
lastParen 
leftContext 
multiline 
rightContext 
source 
$1 
$2 
$3 
$4 
$5 
$6 
$7 
$8 
$9 
$ 
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( 续 
属 性 A X 事件 处 理 程序 
$8 
$4 
$` 
$' 
Reset form blur onblur 
name click onclick 
type focus ondblclick 
value onfocus 
onkeydown 
onkeypress 
onkeyup 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
screen availHeight 无 无 
availWidth 
colorDepth 
height 
pixelDepth 
width 
Script defer 无 
event 
htmlFor 
language 
src 
text 
type 
Select form blur onblur 
length focus onchange 
multiple onclick 
name ondblclick 
Option onfocus 
options onkeydown 
selectedIndex onkeypress 
size onkeyup 
type onmousedown 
value onmousemove 
onmouseout 
onmouseover 
onmouseup 


onresize 
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5 i 


( 
事件 处 理 程 


续 
序 


) 





String 


Style 


length 


background 
backgroundAttachment 
backgroundColor 
backgroundImage 
backgroundPosition 
backgroundRepeat 
border 

borderBottom 
borderBottomColor 


anchor 

big 

blink 

bold 

charAt 
charCodeAt 
concat 

fixed 
fontcolor 
fontsize 
fromCharCode 
indexOf 
italics 
lastIndexOf 
link 
localeCompare 
match 
replace 
search 

slice 

small 

split 

strike 

sub 

substr 
substring 
sup 
toLocaleLowerCase 
toLocaleUpperCase 
toLowerCase 
toString 
toUpperCase 


valueOf 
无 
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对 


属 性 5 ”法 


事件 处 理 程 


* se 





borderBottomStyle 
borderBottomWidth 
borderColor 
borderLeft 
borderLeftColor 
borderLeftStyle 
borderLeftWidth 
borderRight 
borderRightColor 
borderRightStyle 
borderRightWidth 
borderStyle 
borderTop 
borderTopColor 
borderTopStyle 
borderTopWidth 
borderWidth 
bottom 

clear 

clip 

color 

cssText 

cursor 

direction 
display 

font 

fontFamily 
fontSize 
fontStyle 
fontVariant 
fontWeight 
height 

left 

lineHeight 
listStyle 
listStyleImage 
listStylePosition 
listStyleType 
margin 
marginBottom 
marginLeft 
marginRight 
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m 性 


方 


法 


( 
事件 处 理 程 


续 
序 


) 





StyleSheet 


Submit 


marginTop 

overflow 

padding 

paddingBottom 

paddingLeft 

paddingRight 

paddingTop 

pageBreakAfter 

pageBreakBefore 

position 

right 

tableLayout 

textAlign 

textIndent 

textTransform 

top 

unicodeBidi 

verticalAlign 

visibility 

whiteSpace 

width 

wordSpacing 

zIndex 

cssRules 无 
disabled 

href 

media 

parentStyleSheet 

title 

type 

form blur 
name click 
type focus 


value 


onblur 
onclick 
ondblclick 
onfocus 
onkeydown 
onkeypress 
onkeyup 
onmousedown 
onmousemove 
onmouseout 
onmouseover 


onmouseup 
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E 
对 m 性 5 X 事件 处 理 程序 
Text defaultValue blur onblur 
disabled click onchange 
form focus onclick 
maxLength select ondblclick 
name onfocus 
readOnly onkeydown 
size onkeypress 
type onkeyup 
value onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onselect 
Textarea cols blur onblur 
defaultValue click onchange 
form focus onclick 
name select ondblclick 
readOnly onfocus 
rows onkeydown 
type onkeypress 
value onkeyup 
wrap onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onselect 
window closed alert onblur 
defaultStatus blur onerror 
document clearInterval onfocus 
event clearTimeout onload 
external close onmove 
frames confirm onresize 
history focus onunload 
length moveBy 
location moveTo 
name open 
navigator print 
opener prompt 
parent resizeBy 
screen resizeTo 
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(5) 
对 RE m 性 A OB 事件 处 理 程序 

self scroll 
status scrollBy 
top scrollTo 

setInterval 

setTimeout 

XMLHttpRequest readyState abort onload 

response addEventListener onloadend 
responseText getAllResponseHeaders onloadstart 
responseXML getResponseHeader onreadystatechange 
status open ontimeout 
statusText overrideMimeType 
timeout send 
upload setRequestHeader 
withCredentials 


如 果 你 需要 在 自己 的 浏览 器 中 显示 所 有 的 对 象 ， 检 查 一 下 相应 浏览 器 的 开发 者 工具 。 例 如 ,图 A-1 














显示 了 在 Chrome 开发 者 工具 中 查看 ， 尽 管 并 非 所 有 内 容 都 是 跨 浏 览 器 有 效 的， 但 可 以 作为 学 习 的 起 点 。 























图 A-1 使 用 Chrome Developers Tools， 你 可 以 清楚 地 了 解 浏览 右 如 何 查 看 代码 。 其 他 
浏览 器 也 有 类 似 功能 的 开发 者 工具 























JavaScript; E = 














保 留 字 是 对 JavaScript 有 特殊 含义 的 单词 。 因 此 ， 不 能 将 它们 用 作 变 量 名 或 函数 名 。 

在 前 面 的 章节 中 ， 你 已 经 见 过 了 许多 保留 字 ， 但 是 对 其 他 保留 字 可 能 还 不 熟悉 。 其 中 一 部 
分 是 预 留 的 保留 字 ， 也 就 是 说 ， 它 们 可 能 是 ECMAScript 未 来 版 本 中 的 命令 。 现 在 就 应 该 避免 使 用 它 
们 ， 以 免 在 新 版 本 发 布 时 不 得 不 修改 代码 。 




















ECMAScript 3 保留 字 

从 ECMAScript 3 开始 ， 这 些 单 词 是 JavaScript 语言 的 一 部 分 。 
break for throw 
case function try 
catch if typeof 
continue in var 
default instanceof void 
delete new while 
do return with 
else switch 

finally this 


ECMAScript 3 未 来 的 保留 字 


abstract final protected 
boolean float public 

byte goto short 

char implements static 

class import super 

const int synchronized 
debugger interface throws 
double long transient 
enum native volatile 
export package 


extends private 
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ECMAScript 5 未 来 的 保留 字 





这 里 ES5 的 保留 字 列 表 。 它 与 ES3 类 似 , 考虑 到 浏览 器 主要 支持 ES3 , 我 们 建议 你 记 住 所 有 列表 。 


break finally this 
case for throw 
catch function try 
continue if typeof 
debugger in var 
default instanceof void 
delete new while 
do return with 
else switch 

ESS 未 来 的 保留 字 

class interface super 
const let yield 
enum package 

export private 

extends protected 

implements public 

import static 


应 该 避免 使 用 的 其 他 标识 符 





附录 A 中 列 出 的 对 象 名 不 是 正式 的 保留 字 (不 属于 上 面 列 出 的 关键 字 )， 但 是 因为 它们 是 
JavaScript 语言 的 一 部 分 ， 你 不 应 该 将 它们 用 作 变 量 名 或 函数 名 。 如 果 这 么 做 ,结果 无 法 预料 。 





























另外 ， 大 多 数 浏览 需 是 区 分 大 小 写 的 ， 这 意味 着 Document 和 document 是 不 同 的 。IE 只 在 某 些 时 


























候 是 区 分 大 小 写 的 , 这 意味 着 它 可 能 无 法 区 分 Document 和 document。 因 此 , 即使 代码 能 够 在 一 种 浏览 


器 

















abstract get 
arguments goto 
Array has 
Boolean include 
byte Infinity 
call int 

cast internal 
char intrinsic 
Date is 
decimal isFinite 
decodeURI isNaN 
decodeURIComponent JSON 
double like 


正常 工作 ， 也 不 意味 着 在 其 他 浏览 器 中 也 能 正常 工作 。 一 定 要 进行 测试 。 


prototype 
RangeError 
ReferenceError 
RegExp 
rounding 

set 

short 
standard 
strict 
String 
synchronized 
SyntaxError 


throws 
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dynamic long to 

each Math transient 
encodeURI namespace true 
encodeURIComponent NaN type 
Error native TypeError 
eval null uint 
EvalError Number undefined 
false Object URIError 
final override use 

float parseFloat volatile 
Function parseInt xml 


generator precision 


at 


就 开始 制定 CSS 2.1 规范 ， 它 的 目标 是 使 CSS 2 更 接近 浏览 
一 样 ，CSS 2.1 规范 也 是 一 拖 再 拖 ， 直 到 2011 4 


CSS 人 参考 

















文 个 附录 列 出 W3C 定义 的 CSS 3 属性 ( w3.org/Style/CSS/currentwork )。 


CSS 2 这 个 规范 诞生 于 20 世纪 90 年 代 中 期 ， 且 在 1998 年 5 月 就 标准 化 了 。 此 后 不 久 人 们 








厂商 已 经 实际 实现 的 属性 。 跟 其 他 规范 
F6 月 才 完 成 标准 化 。 


CSS 2 标准 化 后 人 们 就 开始 制定 CSS 3 规范 了 ， 它 的 一 大 进步 在 于 将 原来 的 规范 分 成 了 不 同 的 模 
HR, 这 样 每 个 模块 都 可 独立 发 挥 作用 ， 不 干扰 其 他 模块 。 不 过 CSS 3 也 可 谓 历经 磨难 ,正式 发 布 的 模 


块 也 就 寥寥 几 个 。 








不 过 , 也 有 好 消息 。 浏 览 器 制造 商 正 竭尽 全 力 在 各 自 的 浏览 器 中 实现 CSS 3, 因此 目前 大 部 分 CSS 











3 属性 实际 上 都 已 经 








能 用 了 。 本 附录 包括 CSS 3 中 的 绝 大 部 分 











属性 ( 不 全 )。 最 终 采 纳 的 属性 会 随 着 时 





间 而 改变 ， 我 们 认为 学 习 属 性 /浏览 器 /版 本 组 合 的 最 佳 方式 是 尽量 关注 caniuse.com/Zcats-CSS 。 
因为 本 书 是 关于 JavaScript 的 ， 我 们 只 是 稍微 接触 了 CSS 的 皮毛 。 如 果 你 想 了 解 更 多 信息 ， 我 们 


















































推荐 Tom Negrino 和 Dori Smith 著 的 Styling Web Pages with CSS: Visual QuickProject Guide (注意 ， 就 
是 我 们 两 个 写 的 书 哦 )。 
表 C-1 基本 概念 表 C-2 伪 元 素 和 伪 类 
属 性 名 值 属 性 名 值 
HTML 中 的 标签 Link 后 一 个 元 素 :after 
<style>...</style> 锚 元 素 a:active 
< x style=" 声 明 ;"> a:focus 
分 组 x, y, z {声明 ;} a:hover 
上 下 文选 择 器 x y z {声明 ;} a:link 
puniri .class m 7 visited 
ID 选择 器 itid vilis: ie 
5h TUR :firs 
is Le 第 一 个 子 元 素 :first-child 
@page 左 元 素 :left 
@font-face 段落 p:first-letter 
重要 性 ! important Re 
右 元 素 :right 
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表 C-3 页面 属性 ( 续 ) 
属 性 名 ffi 属 性 名 {fi 
orphans < 整数 > all-scroll 
zoom-in 
page-break-after auto 
zoom-out 
always text 
avoid wait 
left cell 
right help 
page-break-before auto progress 
context-menu 
always 
vertical-text 
avoid 7 
alias 
left copy 
right no-drop 
page-break- inside avoid not-allowed 
widows auto none 
p outline «se EB C 
< 轮廓 样式 > 
< 轮廓 宽度 > 
#C-4 ”用户 界 面 属性 outline-color < 颜色 > 
invert 
属 性 名 fü outline-style < 边框 样式 > 
box-sizing content-box auto 
padding-box outline-width < 边框 宽度 > 
border-box resize mong 
cursor «url» both 
auto Horizontal 
crosshair vertical 
default text-overflow clip 
pointer ellipsis 
move «string» 
e-resize 
ne-resize 表 C-5 视觉 效果 属性 
nw-resize n 
n-resize 属 性 名 { 
se-resize max-lines none 
sw-resize < 整数 > 
s-resize overflow «overflow-x» 
w-resize <overflow-y> 
ew-resize overflow-x visible 
ns-resize hidden 
nesw-resize scroll 
nwse-resize auto 
col-resize paged-x 
row-resize paged-y 
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( & ) (5) 
m 性 名 值 属 性 名 值 
paged-x-controls background-repeat repeat 
paged-y-controls repeat-x 
fragments repeat-y 
overflow-y visible no-repeat 
hidden saa 
scroll Foun : 
auto background-size < 百分数 > 
paged-x < 长 度 > 
paged-y contain 
cover 
paged-x-controls aito 
paged-y-controls : 
border <border-width> 
Fragments 
<border-style> 
<border-color> 
表 C-6 ”背景 和 框 属性 border-bottom <border-bottom-width> 
border-bottom-style> 
性 a : 
= - = E 7 FT <border-bottom-color> 
ackgroun bob dd ii T border-bottom-color < 边框 颜色 > 
«background-image» . MED . . 
«background-position»/ border-bottom-right- < 以 长 度 值 或 者 百分数 值 表 
<background-size> radius 示 的 边框 圆 角 > 
<background-repeat> border-bottom-left- < 以 长 度 值 或 者 百分数 值 表 
<background-attachment> radius 不 的 边框 加 d 
«background-clip» border-bottom-style < 边框 样式 > 
<background-origin> border-bottom-width < 边框 宽度 > 
background-attachment ^ scroll border-color «Bite 
fixed border-image «border-image-source» 
local <border-image-slice> 
background-clip border-box <border-image-width> 


background-color 


background-image 


background-origin 


background-position 


padding-box 
content-box 
< 颜色 > 
«url» 

none 
border-box 
padding-box 
content-box 
< 百分数 > 
< 长 度 > 

top 














center 
bottom 
left 
right 


border-image-outset 


border-image-repeat 


border-image-slice 
border-image-source 


border-image-width 


«border-image-outset» 
«border-image-repeat» 
< 长 度 > 

< 数值 > 

Stretch 

repeat 

round 

space 

< 数值 > 

< 百分数 > 

none 

«url» 

< 长 度 > 

< 百分数 > 

< 数值 > 


auto 
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(5X) 表 C-7 表格 属性 
属 性 名 值 属 性 名 值 
border-left <border-left-width> caption-side top 
<border-left-style> bottom 
<border-left-color> table-layout auto 
border-left-color < 边框 颜色 > fixed 
border-left-style < 边框 样式 > border-collapse collapse 
border-left-width < 边框 宽度 > separate 
border-radius < 长 度 > border-spacing < 长 度 > 
< 百分数 > empty-cells show 
border-right <border-right-width> hide 
<border-right-style> border-style none 
<border-right-color> hidden 
border-right-color < 边框 颜色 > dotted 
Eig cun dashed 
border-right-style < 边框 样式 > ene 
border-right-width < 边框 宽度 > double 
border-style none groove 
hidden ridge 
dotted inset 
dashed outset 
solid vertical-align baseline 
double sub 
groove super 
ridge top 
inset text-top 
outset middle 
border-top <border-top-width> bottom 
<border-top-style> text-bottom 
<border-top-color> < 百分数 > 
border-top-color < 边框 颜色 > < 长 度 > 
border-top-left-radius < 以 长 度 值 或 者 百分数 值 表 C-8 ”字体 属性 
表示 的 边框 圆 角 > 
border-top-right-radius ”< 以 长 度 值 或 者 百分数 值 属 性 名 值 
表示 的 边框 贺 角 > font <font-style> 
border-top-style < 边框 样式 > <Tont variant> 
border-top-width < 边框 宽度 > <font-weight> 
<font-stretch> 
border-width < 长 度 > <font-size>/<line-height> 
than <font-family> 
medium caption 
thick Seon 
box-shadow none menu 
< 长 度 > message-box 
< 颜色 > small-caption 
inset status-bar 
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( 续 ) ( 续 ) 
m 性 名 值 属 性 名 值 
font-family < 字体 系列 名 > font-variant- normal 
CU ligatures none 
fantasy common-ligatures 
no-common-ligatures 
monospace : i 3 
: discretionary-ligatures 
sans-serif : : : 
. no-discretionary-ligatures 
serif historical-ligatures 
font-kerning auto no-historical-ligatures 
normal contextual 
none no-contextual 


font-size 


font-size-adjust 


font-stretch 


font-style 


font-synthesis 


font-variant 


font-variant-caps 


< 绝对 大 小 > (xx-small-xx-large ) 
< 相对 大 小 > (smaller-larger ) 
< 长 度 > 

< 百分数 > 


none 





number 

normal 
ultra-condensed 
extra-condensed 
condensed 
semi-condensed 
semi-expanded 
expanded 
extra-expanded 
ultra-expanded 
normal 

italic 

oblique 

none 

< 粗细 > 

< 样式 > 

none 

Tuby 
<font-variant-caps> 
<font-variant-ligatures> 
<font-variant-numeric> 
normal 

small-caps 
all-small-caps 
petite-caps 
all-petite-caps 
unicase 
titling-caps 


font-variant- normal 

numeric lining-nums 
oldstyle-nums 
proportional-nums 
tabular-nums 
diagonal-fractions 
stacked-fractions 
ordinal 
slashed-zero 

font-variant- normal 

position sub 
super 

font-weight normal 
bold 
100-900 

SIC «url» 


表 C-9 单位 
属 性 名 值 














角度 单位 deg 
grad 
rad 
turn 
图 像 «url» 
长 度 单位 ch 
em 
ex 
px 
in 
cm 
mm 
pt 
pc 
rem 
vh 
vmax 
vmin 
vw 
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(5) 
m 性 名 值 属 性 名 值 
分 辨 率 dpi text-decoration-color < 颜色 > 
dpcm text-decoration-line none 
dppx underline 
时 间 S overline 
"s line-through 
blink 
URL «url» . . 
text-decoration-skip none 
objects 
#C-10 文本 属性 spaces 
属 性 名 值 ink 
hanging-punctuation none edges . 
; box-decoration 
first . i 
Torcesend text-decoration-style solid 
allow-end double 
last dotted 
dashed 
hyphens none 
wavy 
manual : Es 
MN text-emphasis-color < 颜色 > 
text-emphasis-position over 
letter-spacing normal Under 
< 长 度 > : 
. right 
line-break auto left 
loose text-emphasis-style none 
novial filled 
strict open 
overflow-wrap normal dot 
break-word circle 
tab-size < 整数 > double-circle 
< 长 度 > triangle 
text-align left sesame 
right <string> 
center text-indent < 长 度 > 
justify < 百分数 > 
start each-line 
end - ba 
match-parent text- justify du 
none 
text-align-last auto inter-word 
start distribute 
end text-shadow none 
left < 长 度 > 
Tight < 颜色 > 
center text-transform capitalize 
justify uppercase 
text-decoration «text-decoration-line» lowercase 
<text-decoration-color> full-width 
<text-decoration-style> none 
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(E) (E) 
m 性 名 值 属 性 名 值 
text-underline-position auto height < 长 度 > 
under < 百分数 > 
left auto 
right min-height < 长 度 > 
white-space normal < 百分数 > 
pre max-height < 长 度 > 
nowrap < 百分数 > 
pre-wrap none 
pre-line overflow visible 
word-break normal hidden 
keep-all scroll 
break-all auto 
word-spacing normal no-display 
«E no-content 
< 百分数 > overflow-style auto 
word-wrap normal scrollbar 
break-word panner 
move 
#C-11 AIE marquee 
overflow-x visible 
属 性 名 值 IE 
ie iu scroll 
left suto 
ds no-display 
both no-content 
EE lert overflow-y visible 
dd hidden 
A ee scroll 
margin = TA nn 
margin-bottom < 长 度 > tains oat! 
Y no-conten 
| ag | e 
margin-left < 长 度 > padding 
< 百分数 > «Har > 
margin-right < 长 度 > padding-bottom < 长 度 > 
< 百分数 > 
< 百分数 > padding-left < 长 度 > 
margin-top < 长 度 > < 百分数 > 
< 百分数 > padding-right < 长 度 > 
width < 长 度 > < 百分数 > 
< 百分数 > padding-top < 长 度 > 
a <i 
oe Bed rotation < 角度 > 
< > 
max-width < 长 度 > visibility collapse 
< 百分数 > visible 
none hidden 
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表 C-12 视觉 格式 化 属性 ( 续 ) 
属 性 名 值 m 性 名 值 
display block position static 
inline absolute 
inline-block sr 
list-item g Fi 
z-index auto 
table < 整数 > 
inline-table 
table-row-group xC-13 ”列表 属性 
table-header-group 
table-footer-group 属 性 名 值 
table-row counter-reset < 标识 符 >< 整 数 > 
table-column-group none 
table-column COUNEER cet < 标识 符 >< 整 数 > 
table-cell none 
table-caption counter-increment < 标识 符 >< 整 数 > 
none none 
left auos list-style <list-style-type> 
jo! <list-style-position> 
< 百分数 > <list-style-image> 
right auto list-style-image <image> 
< 会 及 > none 
A3 
< 百分数 > list-style-position inside 
top auto outside 
< 长 度 > : : 
j list-style-type disc 
< 百分数 > m circle 
bottom auto square 
jin disclosure-open 
< 百分数 > disclosure-closed 
float left decimal 
right decimal-leading-zero 
i none hebrew 
clear none 
lower-roman 
left 
right upper-roman 
both lower-greek 
direction ltr lower-alpha 
rtl lower-latin 
unicode-bidi normal upper-alpha 
embed lati 
bidi-override A ann 
line-height normal uc 
< 数值 > georgian 
< 长 度 > <string> 
< 百分数 > none 


none 
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RC-14 ”生成 的 内 容 属性 


表 C-15 颜色 属性 








属 性 名 值 属 性 名 值 
content < 字符 串 > color #000 
«url» #000000 
< 标识 符 > hsl(HHH, S26, L26) 
«ris rgb(RRR, GGG, BBB) 
inhibit rgb(R?6, G26, B26) 
open-quote rgba(RRR, GGG, BBB, «alphavalue») 


counter-increment 


counter-reset 


quotes 


close-quote 
no-open-quote 
no-close-quote 
none 

normal opacity 
< 标识 符 > 

< 整数 > 

none 

< 标识 符 > 

< 整数 > 

none 

< 字符 串 > 


none 





rgba(R%,G%,B%, «alphavalue») 
transparent 

currentColor 

< 关键 词 > 


<alphavalue> 


tau 
A~ 


其 他 


Si 


nk 
vl 








EM 完 本 书 之 后 ， 你 应 该 会 急于 开始 用 JavaScript 为 Web 站 点 增色 添彩 。 但 是 ， 关 于 JavaScript 
语言 还 有 许多 要 学 习 的 东西 ， 而 且 你 在 编写 代码 时 可 能 会 遇 到 问题 。 

正如 你 所 料 ， 为 这 些 问 题 寻 找 答案 的 最 佳 地 方 是 在 网 上 。 在 网 上 有 许多 资源 可 以 帮助 你 解决 问题 
以 及 深入 了 解 JavaScript. 

在 这 个 附录 中 ， 我 们 将 介绍 几 个 最 有 帮助 的 面向 JavaScript 的 Web 站 点 ， 还 要 提 到 本 书 作 者 认为 
有 帮助 的 其 他 书 。 

但 是 ， 首 先 提 醒 你 注意 一 点 : 网 络 不 是 静态 不 变 的 。Web 站 点 可 能 会 改变 它们 页 面 的 地 址 ， 所 以 
随 着 时 间 的 推移 ， 我 们 列 出 的 URL 到 你 使 用 它们 时 可 能 会 失效 。 我 们 仅仅 是 推荐 这 些 URL, {AME 
证 它们 一 直 有 效 。 有 时 候 ， 甚 至 整个 站 点 都 会 消失 。 如 果 你 发 现 一 个 链接 失效 了 ,那么 请 访问 我 们 的 
配套 Web 站 点 〈javascriptworld.com )， 看 看 我 们 是 否 发 布 了 你 所 寻找 的 页 面 的 新 位 置 。 


D.1 在 网 上 寻找 帮助 


在 Mozilla 的 网 站 上 可 以 找到 原始 的 JavaScript 文档 , 但 是 在 微软 和 独立 JavaScript 页 面 上 有 许多 
好 信息 。 下 面 是 一 些 最 好 的 JavaScript 网 站 。 


D.1.1 浏览 器 厂商 


既然 是 Netscape 开发 了 JavaScript, Mi Mozilla 项 目 开 发 了 开放 源码 的 Mozilla 和 Firefox ( 它们 是 
Netscape 浏览 器 的 后 继 者 ), 所 以 Mozilla 项 目 提 供 了 关于 JavaScript 语言 和 进一步 开发 的 许多 好 信息 。 

1. JavaScript 中 心 

developer.mozilla.org/en/JavaScript 

这 个 网 站 对 所 有 水 平 的 JavaScript 用 户 都 有 帮助 ， 其 中 包含 工具 和 文档 的 链接 ( 见 图 D-1 )。 文 档 
包括 Core JavaScript Reference ( 讨论 JavaScript 1.5 )， 它 介绍 了 JavaScript 语言 的 基本 知识 ， 定 义 并 解 
RET JavaScript 中 使 用 的 概念 。 这 个 网 站 有 一 定 的 学 习 难 度 ， 示 例 也 比较 粗略 ， 但 是 在 消化 了 本 书 的 
内 容 之 后 ,你 应 该 能 够 理解 这 些 资 料 。 在 这 里 还 可 以 找到 Core JavaScript Guide， 以 及 对 JavaScript 1.6 
之 后 新 增 特性 的 解释 。 
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图 D-1 Developer Center 的 Mozilla JavaScript 部 分 是 进一步 了 解 JavaScript 的 好 地 方 


2. Venkman 调试 器 

developer.mozilla.org/en/venkman 

当 需 要 对 JavaScript 进行 调试 时 ， 使 用 出 色 的 调试 工具 肯定 会 对 你 有 帮助 。Venkman 是 Mozilla 
项 目 提供 的 JavaScript 调试 器 ， 它 是 一 种 适用 于 Firefox, Thunderbird 和 Mozilla 的 好 工具 ， 人 允许 用 户 
分 步 执 行 代码 ， 设 置 断 点 ， 在 脚本 执行 时 检查 对 象 和 变量 ， 以 及 处 理 JavaScript 源 代码 。 

3. Mozilla Hacks 一 一 Web 开发 者 博客 

hacks.mozilla.org 

该 blog 自称 它 “ 面 向 使 用 Mozilla Firefox 和 开放 Web 的 人 ， 突 出 前 沿 性 的 东西 ”一 一 它 的 确 如 此 。 

4. Microsoft 的 JScript 语言 

msdn.microsoft.com/hbxc2t98.aspx 

JScript 是 Microsoft 自己 的 JavaScript WRAL, TE Microsoft 开发 者 网 站 上 有 自己 的 独立 页 面 ， 如 图 
D-2 所 示 , 登录 网 站 可 以 学 习 JScript 与 Mozilla 的 JavaScript 之 间 的 相同 点 和 不 同 点 , 还 可 以 找到 详细 
的 JScript 语言 参考 书 和 JScript 用 户 手册 。 



































| 
























































图 D-2 JScript 是 Microsoft 开发 的 JavaScript 变种 
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5. Surfin 的 Safari 

webkit.org/blog/ 

虽然 这 个 网 站 ( 如 图 D-3 所 示 ) 不 仅仅 介绍 JavaScript, 但 它 全 面 介 绍 了 苹果 的 Safari 浏览 器 及 其 
WebKit 演 染 引擎 一 一 已 不 只 是 Mac 才能 用 了 。 在 这 里 可 以 直接 从 苹果 的 员工 那 得 到 关于 Safari 的 下 
一 个 版 本 中 包含 什么 功能 以 及 不 包含 什么 功能 的 信息 。 同 时 还 可 以 找到 WebKit 可 下 载 的 nightly 版 本 ， 


























让 我 们 在 苹果 正式 发 布 很 久之 前 就 能 提前 使 用 到 新 功能 。 


@. Surfin’ Safari 


Little overview of Webiit's CSS JIT Compiler 

















article > header + section 











图 D-3 要 想 了 解 Safari 的 最 新 信息 (Mac, Windows 或 者 iOS 平台 )， 登 录 Surfin 的 Safari 


D.1.2 博客 及 其 他 


有 许多 专注 于 JavaScript 的 博客 。 下 面 是 我 们 喜欢 的 一 些 博客 ,但 是 还 有 许 许 多 多 出 色 的 博客 。 

1. DailyJS 

dailyjs.com 

关于 JavaScript 的 博客 浮 浮 沉沉 ， 但 DailyJS 一 直 陪 伴 大 家 。JavaScript 相关 的 新 鲜 事 和 链接 都 能 
从 这 个 博客 中 找到 。 

2. QuirksMode 

quirksmode.org/blog/ 

Peter-Paul Koch 是 荷兰 的 一 位 JavaScript 开发 人 员 。 他 的 站 点 〈 见 图 D-4 ) 最 出 色 的 特色 是 , 它 非 
常 及 时 地 提供 关于 浏览 器 及 其 JavaScript 功能 的 最 新 消息 。 它 并 非 一 个 指南 性 站 点 ， 但 是 提供 了 许多 
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对 初级 脚本 开发 人 员 有 帮助 的 基本 信息 。 






[quirxsmode] 


— — € — = 


p mm i e e ae i eee a pein ght nom 


一 ,一 = 一 一 一 一 一 -一 “一 wm 二 








eb ay 1 bea fhe wm Cet be me ton ing € 








图 D-4 Peter-Paul Koch AY QuirksMode 站 点 常常 会 在 其 他 人 之 前 提供 最 新 的 JavaScript 信息 
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尽管 本 书 的 作者 希望 光 靠 本 书 就 能 够 让 你 成 为 JavaScript 专家 ， 但 是 我 们 知道 这 是 不 现实 的 ， 在 
你 消化 了 本 书 之 后 ， 可 能 还 需要 了 人 解 更 多 信息 。 图 书市 场 上 有 数 不 清 的 JavaScript 图 书 ， 下 面 是 我 们 
认为 最 好 的 几 本 书 ( 排名 不 分 先后 )。 

1. (JavaScript 权威 指南 》 

由 David Flanagan 执笔 ，O’Reilly 出 版 。 这 是 一 本 针对 JavaScript 语言 全 面 的 参考 手册 。“ 胆 小 勿 
A^, 很 多 专家 通过 本 书 查阅 生僻 的 操作 符 并 制定 怪异 的 语法 。 在 经 过 了 漫长 的 等 待 之 后 ,本 书 的 第 6 
版 出 版 了 ， 带 来 了 最 新 的 知识 库 。 

2.《ppk 谈 JavaScript) 

Peter-Paul Koch 是 公认 的 JavaScript 大 师 之 一 。 在 New Riders 出 版 的 这 本 书 中 ， 他 使 用 为 客户 创 
建 的 真实 的 脚本 示例 帮助 读者 在 理论 和 实践 两 方面 掌握 JavaScript。 

3.《 精 通 JavaScript) 

由 John Resig (jQuery 名 人 ) HE, 辅助 中 级 JavaScript 开发 人 员 成 为 高 级 开发 人 员 。 本 书 不 适合 
新 手 ， 它 是 一 本 学 完 后 值得 深入 研读 的 好 书 。 
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D.3 解决 问题 的 技巧 


对 于 编程 新 手 来 说 ， 可 能 会 感觉 每 行 都 有 错误 ,不 过 庆幸 的 是 ， 有 很 多 在 线 资源 可 以 帮 我 们 度 过 
这 个 困难 重重 的 时 期 。 下 面 是 精 选 的 一 些 资 源 。 


D.3.1 缺失 的 插件 


1. Firebug 调试 器 

getfirebug.com 

不 管 你 是 否 喜 欢 Mozilla 的 Venkman, 都 会 爱 上 Firebug, 如 图 D-5 所 示 。 在 Firefox 中 使 用 Firebug 
不 仅 可 以 调试 脚本 ,还 可 以 调试 HTML 和 CSS。Firebug 还 有 以 下 优点 : 免费 、 文 档 良 好 、 记 录 便 捷 
可 随意 设置 断 点 和 DOM 支持 。 

如 果 说 我 们 的 编程 生活 中 唯一 的 遗憾 就 是 在 IE. Safari 和 Opera 中 缺失 类 似 功 能 的 话 ， 请 登录 
http://getfirebug.com/lite.html, 试 试 Firebug Lite, 如 图 D-6 所 示 。 虽然 功能 方面 不 像 Firebug 那么 全 面 ， 
但 跟踪 bug 时 ， 它 提供 的 简单 通用 界面 是 非常 方便 的 。 
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图 D-5 VEN Firefox 的 插件 ，Firebug 提供 了 相当 EL D-6 如 果 我 们 使 用 的 不 是 Firefox ,那么 也 可 以 运 
强大 的 控制 功能 和 多 样 化 的 代码 检查 方式 行 Firebug Lite。 图 中 显示 的 是 图 D-5 中 的 
页 面 在 Safari 中 的 显示 效果 








附录 DD 其 他 学 习 资 源 403 





2. JSHint 

Jshint.com 

如 果 你 跟 我 们 一 样 ， 在 遇 到 HTML 和 CSS 的 问题 时 第 一 反应 就 是 去 找 一 个 验证 器 ， 而 同时 又 希 
望 在 JavaScript 方面 也 有 类 似 的 工具 的 话 ， 那 你 可 能 听 说 过 JSLint。JSLint 是 一 个 代码 检查 工具 。 再 
如 果 ， 你 还 跟 我 们 〈 以 及 其 他 很 多 的 JavaScript 程序 员 ) 一 样 ， 发 现 JSLint 实际 用 起 来 不 太 好 用 ， 那 
么 JSHint 就 是 你 需要 的 。JSHint 的 设计 初 囊 不 仅 是 代码 检查 ,而且 富 有 灵活 性 , 不 会 像 JSLint 那样 出 
现 “ 说 一 不 二 ”的 死板 规定 。 

3. Can | Use... 

caniuse.com/#cats=JS_API 

如 果 你 编写 比较 前 沿 的 JavaScript 代码 ， 可 能 会 遇 上 浏览 器 不 兼容 问题 。 一 旦 出 现 这 类 问题 ， 你 
可 以 来 这 个 网 站 看 看 ， 这 里 详细 列 出 了 哪 种 浏览 器 支持 哪些 功能 、 不 支持 哪些 功能 ， 这 些 功能 肯定 涵 
盖 你 正 绞 尽 脑 计 使 用 的 某 几 种 。 











































































































D.3.2 在线 pastebin 


你 是 否 曾 经 希望 不 仅仅 是 拿 浏 览 器 来 测试 代码 ， 同 时 还 想 编写 代码 ”是 啊 ， 为 什么 我 们 必须 要 来 
回 切 换 界面 ? pastebin 的 功能 之 一 就 是 在 同一 窗口 中 编写 和 运行 代码 。 

另 一 个 方便 的 功能 是 可 以 保存 文件 并 展现 给 其 他 人 也 就 是 在 你 需要 帮助 的 时 候 指 给 别人 看 )。 
而 更 酷 的 是 它 可 以 修改 你 的 代码 ， 帮 你 查找 和 修正 那些 邻 人 讨厌 的 bug。 

网 上 有 很 多 关于 pastebin 的 网 站 ， 一 些 是 支持 HTML, CSS 和 JavaScript 的 。 我们 ( 及 一 部 分 人 ) 
喜欢 下 面 两 个 。 

1. JSBin 

jsbin.com 

2. JSFiddle 

jsfiddle.net 
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“学 习 JavaScript 必 备 书目 ! ” 


“本 书 是 我 所 见 过 的 讲解 最 清晰 、 内 容 最 全 面 、 最 吸引 人 的 JavaScript 程 序 设计 图 书 。” 


在 Web 开 发 如 火 如 茶 的 今天 ，JavaScript 理 所 当然 地 成 为 广大 开发 人 员 必 须 熟 练 掌握 的 一 
项 主流 技术 。 根 据 有 关 编 程 语 言 市 场 份额 的 调查 ，JavaScript 已 经 成 为 Web 开 发 人 员 使 用 最 多 
的 开发 语言 。 

本 书 被 奉 为 经 典 JavaScript 入 门 书 ， 以 易学 便 查 、 图 文 并 茂 、 循 序 渐进 而 著称 ， 作 者 善于 用 

见 任 务 讲解 语言 知识 。 书 中 除了 讲述 JavaScript 编 程 的 必 知 必 会 知识 外 ， 还 同时 兼顾 了 

DOM、XML、Ajax、jQuery 等 重要 的 技术 内 容 。 多 年 来 ， 本 书 不 断 重印 改版 ， 原 版 累计 销售 已 
经 近 20 万 册 。 第 7 版 和 第 8 版 的 中 文 版 出 版 后 也 多 次 重印 ， 广 受 国内 读者 好 评 。 第 9 版 对 上 一 版 
进行 了 全 面 修订 和 更 新 ， 更 新 了 针对 各 主要 浏览 器 的 代码 并 增加 了 一 章 全 新 内 容 ， 介 绍 为 移动 
设备 编写 脚本 的 方法 。 

通过 本 书 ， 读 者 可 以 迅速 轻松 掌握 用 JavaScript 进 行 Web 开 发 的 基本 技能 ， 并 了 解 最 佳 实 
践 ， 领 悟 其 中 真 谤 。 
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